Future Sticky Navigation with Glas Effect

future-sticky-navigation-with-glas-effect.markdown

Future Sticky Navigation with Glas Effect

A really cool modern sticky navigation with a glass effect and a menu button. Only Vanilla JS and (S)CSS.

A Pen by albertsadday on CodePen.

License.

index.html

<header id="myHeader" class="">
	<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 714.6 401.1">
  <path fill="#fff" fill-rule="evenodd" d="M502.8 0h211.8l-23 39.7-138.5 240L483 401H342.7L413 279.6 251.4 0h140.3L483 158.1 538.6 62 502.8 0Zm-201 279.6L140.1 0H0l231.7 401 70-121.4Z"/>
</svg>
	<nav>
		<a href="#vision">Vision</a>
		<a href="#knowledge">Knowledge</a>
		<a href="#space">Space</a>
		<a href="#future">Future</a>
		<button id="openmenu">
			<span></span>
			<span></span>
		</button>
	</nav>
</header>
<div id="page" class="">
	<section id="vision" style="background-image:url(https://assets.codepen.io/214624/vision.jpg)">
		<h1>Vision.</h1>
	</section>
	<section id="knowledge" style="background-image:url(https://assets.codepen.io/214624/knowledge.jpg)">
		<h1>Knowledge.</h1>
	</section>
	<section id="space" style="background-image:url(https://assets.codepen.io/214624/space.jpg)">
		<h1>Space.</h1>
	</section>
	<section id="future" style="background-image:url(https://assets.codepen.io/214624/future.jpg)">
		<h1>Future.</h1>
	</section>
</div>

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

style.scss

body {
	    line-height: 1.6;
    color: #fff;
		background: #000;
    font-size: 18px;
    font-weight: 400;
    font-family: "-apple-system", "BlinkMacSystemFont", "Roboto", "Helvetica Neue", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	
	&.stop {
		overflow: hidden;
	}
}

#page {
	position: relative;
	transition: 1s all ease-in-out;
	
	&.menuopen {
		opacity: .6;
		filter: blur(20px);
		transform: scale(1.2);
	}
}

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 {
		position: fixed;
		top: 30px;
		left: 0;
		right: 0;
		width: 100px;
		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: 120px;
		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;
		}
	}
}