A Sticky menu navigation is popular in webs. It keeps a menu bar at the top of the page visible on the screen while the user scrolls down. Most of the wev development frameworks uses it, or has a solution to achieve this objective. Make an sticky navigation bar in plain javascript is not difficult. There are a lot of tutorials which explain how to create it. It isn’t a novel idea, but it’s useful to learn more about Javascript.
The HTML could be any kind you want. In my case I have a nav bar in the page with the following tags:
<nav class="nav"> <div class="container"> <h1 class="logo"><a href="/index.html">Sticky Nav</a></h1> <ul> <li><a href="#" class="current">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Service</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav>The important part is the “nav” container that has the begining style.
.nav { position: fixed; background-color: slateblue; top: 0; left: 0; right: 0; transition: all 0.3s ease-in-out;}But, we also have the style which change the sate to active
.nav.active { background-color: #fff; box-shadow: 0 2px 10 rgba(0, 0, 0, 0.3);}.nav.active a { color: #000}.nav.active .container { padding: 10px 0;}This changes is made by a javascript code whihc compare the scroll in Y, to the height:
function fixNav(){ if(window.scrollY > nav.offsetHeight + 150) { nav.classList.add('active') } else { nav.classList.remove('active') }}You can see the code in this GitHub Repository: 25.sticky_nav and the demo of the project is here: Sticky Nav