Glass style navigation bar with collapse on scroll

This navigation is made in a glassmorphic style with a translucent frosted background. It is a sticky nav and will collapse into a mobil style menu on scroll. Clicking on the nav in the collapsed view will blue the page in the background.

HTML:

<header id="myHeader" class="">
	<nav>
		<img class="icon" id="logo" src="https://www.embeemedialab.com/assets/img/logo/icolite.png">
		<a href="#vision">Home</a>
		<a href="#knowledge">About</a>
		<a href="#space">Social</a>
		<a href="#future">Contact</a>
		<button id="openmenu">
			<span></span>
			<span></span>
		</button>
	</nav>
</header>
<div id="page" class="">
	<section id="one" style="">
		<h1>One</h1>
	</section>
	<section id="two" style="background-image:url(https://www.embeemedialab.com/assets/images/ice.one.png); padding-top: 400px; padding-bottom: 400px">
		<h1>two.</h1>
	</section>
	<section style="padding-top:10px; padding-bottom:10px"></section>
	<section id="three" style="background-image:url(https://www.embeemedialab.com/assets/images/ice.two.png); padding-top: 400px; padding-bottom: 400px">
		<h1>three.</h1>
	</section>
	<section style="padding-top:10px; padding-bottom=10px"></section>
	<section id="four" style="background-image:url(https://www.embeemedialab.com/assets/images/ice.three.png); padding-top: 400px; padding-bottom: 400px">
		<h1>four.</h1>
	</section>
</div>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');

body {
	  line-height: 1.6;
    color: #fff;
	  font: Rubik, sans-serif;
		background: #121212;
    font-size: 18px;
    font-weight: 400;
    
	
	&.stop {
		overflow: hidden;
	}
}

#page {
	position: relative;
	transition: 1s all ease-in-out;
	
	&.menuopen {
		opacity: .6;
		filter: blur(20px);
		transform: scale(1.2);
	}
}
.icon {
	max-width: 75px;
	background:transparent;
	display: inline;
	justify-content:center;
}


section {
	display: flex;
	min-height: 100vh;
	padding: 50px;
	justify-content: center;
	align-items: center;
	background: #222;
	color: #fff;
	position: relative;
	
	
	&:after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		background: #000;
		opacity: .5;
		height: 100%;
		width: 100%;
	}
	
	h1 {
		font-size: 120px;
		margin: 0;
		z-index: 2;
		position: relative;
	}
}

header {
	z-index: 99999;
	position: relative;
	
	#logo {
		
		height: auto;
		margin: 0 auto;
		opacity: 1;
		transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1) .6s;
	}
	
	nav {
		display: flex;
		height: 100px;
		justify-content: center;
		align-items: center;
		padding: 0 20px;
		position: fixed;
		left: 0;
		right: 0;
		width: 500px;
		margin: 0 auto;
		top: 20px;
		background-color: rgba(255,255,255,.05);
		border-radius: 200px;
		z-index: 9;
		backdrop-filter: blur(5px);
		border: 1px solid rgba(255,255,255,.06);
		transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1) .2s;

		
		a {
			color: #fff;
			text-decoration: none;
			font-weight: 700;
			display: block;
			padding: 10px 20px;
			line-height: 1;
			font-size: 15px;
			letter-spacing: 2px;
			text-transform: lowercase;
			transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1) .6s;

		}
		
		button {
			-webkit-appearance: none;
			background: rgba(0,0,0,.3);
			backdrop-filter: blur(5px);
			border: 1px solid rgba(255,255,255,.1);
			position: absolute;
			z-index: 99;
			left: 0;
			margin: auto;
			right: 0;
			top: 0;
			bottom: 0;
			width: 60px;
			height: 60px;
			border-radius: 100%;
			outline: 0;
				border: 0;
			cursor: pointer;
								transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
			transform: scale(0);

			span {
				width: 40%;
				background: #fff;
				height: 2px;
				display: block;
				margin: 5px auto;
				transform: scalex(0);
				transition: .6s transform cubic-bezier(0.075, 0.82, 0.165, 1) 0s, .3s margin ease-in 0s;
			}
			
			&:hover {
				border-color: rgba(255,255,255,.5);
				
				span {
					margin: 10px auto;
				}
			}
		}
	}
}

header.sticky {
	#logo {
		top: 0;
		transform: scale(.8);
		opacity: 0;
		transition-delay: 0.5s;
	}
	nav {
		top: 20px;
		padding: 0;
		width: 90px;
		height: 90px;
		transition-delay: 0.5s;
		
		button {
			transform: scale(1);
			transition-delay: 0.6s;
			
			span {
				transform: scalex(1);
				transition: .6s transform cubic-bezier(0.075, 0.82, 0.165, 1) .8s, .3s margin ease-in 0s;
			}
		}
		
		a { 
			padding: 0;
			opacity: 0;
			letter-spacing: 0px;
			transform: scale(0.3);
			transition-delay: 0.2s;
		}
	}
}

JS:

document.addEventListener('DOMContentLoaded', function() {
    var header = document.getElementById('myHeader');
	  var page = document.getElementById('page');
    var openMenuButton = document.getElementById('openmenu');

    window.addEventListener('scroll', function() {
				page.classList.remove('menuopen');
        if (window.scrollY >= 100) {
            header.classList.add('sticky');
        } else {
            header.classList.remove('sticky');
        }
    });

    // Event listener to remove the sticky class when the button is clicked
    openMenuButton.addEventListener('click', function() {
        header.classList.remove('sticky');
				page.classList.add('menuopen');
    });
	
	var links = document.querySelectorAll('a[href^="#"]');

    links.forEach(function(link) {
        link.addEventListener('click', function(event) {
            // Prevent the default action
            event.preventDefault();

            // Get the target element
            var targetId = this.getAttribute('href');
            var targetElement = document.querySelector(targetId);

            // Smooth scroll to target
            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });
});

Check it out on Codepen

View code on Github