Author: | stoneprog44am |
---|---|
Views Total: | 1,632 views |
Official Page: | Go to website |
Last Update: | December 8, 2020 |
License: | MIT |
Preview:

Description:
A modern header navigation bar that sticks to the top of the webpage by using the CSS position: sticky
property.
How to use it:
1. Create a header navbar from a nav list.
<header> <nav> <ul> <li class="nav__links"><a href="#">Home</a></li> <li class="nav__links"><a href="#">About</a></li> <li class="nav__links"><a href="#">Services</a></li> </ul> </nav> </header>
2. Make the header navbar fixed on the top the page.
header { position: sticky; top:0; /* more styles here */ }
3. Listen for the scroll event and apply a Sticky class to the header navbar after the document is currently scrolled vertically from the origin.
window.addEventListener("scroll" ,function() { let header = document.querySelector("header"); header.classList.toggle("sticky", window.scrollY > 0); });
4. Change the styles of the header navbar when getting stuck.
.sticky { background: #fff; transition: 2s; } .sticky a { color: #5c4e82 }