From 0d1a95e2bededd15eaa3ced39a7836f075f32c7a Mon Sep 17 00:00:00 2001
From: Korbs <51213244+KorbsStudio@users.noreply.github.com>
Date: Mon, 2 May 2022 16:01:49 -0400
Subject: [PATCH] Add background when scrolling pass page title

---
 _includes/master/head.html   |  1 +
 _includes/master/header.html |  3 ++-
 assets/js/scroll-header.js   | 18 ++++++++++++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/scroll-header.js

diff --git a/_includes/master/head.html b/_includes/master/head.html
index b69d180..d240a31 100644
--- a/_includes/master/head.html
+++ b/_includes/master/head.html
@@ -5,5 +5,6 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">
 
+    <script src="/assets/js/scroll-header.js"></script>
     <script src="https://kit.fontawesome.com/fc093d7fbf.js" crossorigin="anonymous"></script>
 </head>
\ No newline at end of file
diff --git a/_includes/master/header.html b/_includes/master/header.html
index 837983c..d2b401e 100644
--- a/_includes/master/header.html
+++ b/_includes/master/header.html
@@ -16,4 +16,5 @@
             <a href="https://www.youtube.com/c/blueanimates" target="_blank"><i class="fa-brands fa-youtube"></i></a>
         </div>
     </div>
-</header>
\ No newline at end of file
+</header>
+<hb></hb>
\ No newline at end of file
diff --git a/assets/js/scroll-header.js b/assets/js/scroll-header.js
new file mode 100644
index 0000000..2830691
--- /dev/null
+++ b/assets/js/scroll-header.js
@@ -0,0 +1,18 @@
+window.onscroll = function() {headerScroll()};
+
+function headerScroll() {
+	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+  
+    if (scrollTop > 0 && scrollTop < 60) {
+        document.querySelector('#for-banner').style.opacity = '1';
+    }
+    if (scrollTop > 60 && scrollTop < 5000) {
+        document.querySelector('#for-banner').style.opacity = '0';
+    }
+    if (scrollTop > 0 && scrollTop < 129) {
+        document.querySelector('hb').style.backgroundColor = 'transparent';
+    }
+    if (scrollTop > 130 && scrollTop < 5000) {
+        document.querySelector('hb').style.backgroundColor = 'var(--blue)';
+    }
+}