Having an issue with the navbar functionality on my website. It is working properly in Firefox, but not in Chrome and Safari. When scrolling back up to the very top of the page, the navbar hides due to a minor bounce effect which triggers the hide action. The same happens when reaching the end of the page – a bounce effect reveals the navbar. I need to eliminate these tiny bounces from affecting the navbar behavior. As a beginner in JavaScript, I am struggling to find the relevant elements for manipulation. Any guidance or solution would be greatly appreciated. Using normalize.css as well for additional context. Thank you in advance for the help!
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("fader").style.top = "0";
} else {
document.getElementById("fader").style.top = "-100%";
}
prevScrollpos = currentScrollPos;
}.nav-wrapper {
width: 100%;
position: fixed;
top: 0;
transition: top 0.7s;
}<header class="nav-wrapper bg-dark" id="fader">
<nav class="navbar">
<img class="pic" src="assets/pic.svg" alt="Pic" />
<img class="logo" src="assets/logo.svg" alt="Logo" />
<div class="menu-toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="nav no-search">
<li class="nav-item"><a href="#one">One</a></li>
<li class="nav-item"><a href="#two">Two</a></li>
<li class="nav-item"><a href="#three">Three</a></li>
<li class="nav-item"><a href="#four">Four</a></li>
<li class="nav-item"><a href="#five">Five</a></li>
</ul>
</nav>
</header>