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)';
+    }
+}