feat: make header transparent if near top of page

public/assets/css/partials/header.css

@@ -17,6 +17,10 @@ header::before {
 	width: 120vw;
 	height: calc(100% + 35px + 35px);
 	background: rgba(27, 31, 59, 0.98);
+	transition: background 180ms;
+}
+header.transparent::before {
+	background: rgba(27, 31, 59, 0);
 }
 header.dropdown-active {
 	box-shadow: 0 0 0 600vw rgba(27, 31, 59, 0.8);

public/assets/js/header-handler.js

@@ -33,9 +33,21 @@ function navbarDropdownHandler(buttonID) {
 
 	// dim the rest of the page
 	header.classList.add('dropdown-active');
-
 }
 
+// make the header background trnasparent if near the top of the page
+function makeHeaderBackgroundTransparent() {
+	if(window.pageYOffset < 100) {
+		header.classList.add('transparent');
+	} else {
+		header.classList.remove('transparent');
+	}
+}
+makeHeaderBackgroundTransparent();
+window.addEventListener('scroll', () => {
+	makeHeaderBackgroundTransparent();
+});
+
 const navbarDropdownBtns = document.querySelectorAll('header .dropdown-button-wrapper button.dropdown-button');
 navbarDropdownBtns.forEach((btn) => {
 	[ 'click', 'mouseover' ].forEach((event) => {

views/partials/header.handlebars

@@ -1,6 +1,6 @@
 <link rel="stylesheet" href="/assets/css/partials/header.css" ></link>
 
-<header>
+<header class="transparent">
 	<a href="/" class="logo-link">
 		<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
 			<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">