Navigation bars (NB) cover part of the screen. This may not always be very good for the UX. Therefore, sometimes following snippet (or a similar one) is used to hide and show the NB on scroll.
Not so clever hide and show navbar
This solution is good but has one shortcoming. The NB shows again immediately after the user scrolls up.
When the user scrolls up, he may not have the intention to see the NB. He may only wish to see content that is a bit higher. Showing the navbar immediately after a minimum scroll up may disturb the user.
Creating a navbar that will show only after a significant scroll up might improve the user experience. I wrote a snippet that does exactly that. You can also view it on my codepen.
Clever Hide and Show Navbar on codepen
I wrote this to share my code with others. But I welcome any comments and suggestions.
//make the navigation work
const open = document.querySelector(".open");
const close = document.querySelector(".close");
const links = document.querySelector(".links");
const navbar = document.querySelector(".navbar");
open.addEventListener("click", () => {
links.classList.add("show-links");
open.classList.add("display-none");
close.classList.remove("display-none");
});
close.addEventListener("click", () => {
links.classList.remove("show-links");
open.classList.remove("display-none");
close.classList.add("display-none");
});
//make the navigation clever
let scroll_change;
let negative_acumulated_change;
let prevScrollPos = window.pageYOffset;
window.onscroll = function() {
let currentScrollPos = window.pageYOffset;
scroll_change = currentScrollPos - prevScrollPos;
//changing acumulated_change
if (scroll_change < 0) {
negative_acumulated_change += scroll_change;
} else {
negative_acumulated_change = 0;
}
//functionality
if (scroll_change > 0) {
navbar.classList.add("hide-navbar");
links.classList.remove("show-links");
if (close) {
close.classList.add("display-none");
}
open.classList.remove("display-none");
}
if (currentScrollPos < 100) {
navbar.classList.remove("hide-navbar");
}
if (negative_acumulated_change < -250) {
navbar.classList.remove("hide-navbar");
}
prevScrollPos = currentScrollPos;
};/*navigation bar*/
.navbar {
height: 50px;
background-color: #b7542d;
width: 100%;
position: fixed;
top: 0;
transition: top 0.5s;
z-index: 2;
}
.open,
.close {
color: white;
float: right;
margin-right: 50px;
border: 2px solid white;
margin-top: 12px;
padding: 3px 10px 3px 10px;
border-radius: 5px;
cursor: pointer;
width: 60px;
text-align: center;
}
.open:hover,
.close:hover {
background-color: white;
color: #b7542d;
}
.hide-navbar {
top: -50px;
transition: top 0.5s;
}
/*the links*/
.links {
width: 100%;
height: 0px;
background-color: #b7542d;
color: white;
overflow: hidden;
transition: height 0.5s;
position: fixed;
top: 0;
}
.links div {
padding-left: 40px;
height: 50px;
line-height: 50px;
}
.one {
height: 30px !important;
}
.two:hover,
.three:hover {
background-color: #a6461f;
}
.show-links {
height: 200px;
transition: height 0.5s;
}
.display-none {
display: none;
}
/*other*/
body {
margin: 0;
height: 3000px;
}<body>
<div class="navbar">
<div class="open">OPEN</div>
<div class="close display-none">CLOSE</div>
</div>
<div class="links">
<div class="zero"></div>
<div class="one"></div>
<div class="two">Link 1</div>
<div class="three">Link 2</div>
</div>
</body>