I've been attempting to implement a feature on my website where the header hides when scrolling down and re-appears when scrolling up. However, I'm struggling to make use of the code snippet below to achieve this functionality. Despite my thorough search for a solution, I haven't been able to figure it out yet. Any assistance would be greatly appreciated, especially considering my beginner level in this area. :)
window.addEventListener('scroll', throttle(throttleTimeout, function() {
//...
if (wScrollCurrent <= 0) // scrolled to the very top; element sticks to the top
removeElementClass(element, elClassHidden);
else if (wScrollDiff > 0 && hasElementClass(element, elClassHidden)) // scrolled up; element slides in
removeElementClass(element, elClassHidden);
else if (wScrollDiff < 0) // scrolled down
{
if (wScrollCurrent + wHeight >= dHeight && hasElementClass(element, elClassHidden)) // scrolled to the very bottom; element slides in
removeElementClass(element, elClassHidden);
else // scrolled down; element slides out
addElementClass(element, elClassHidden);
}
//...
}));.header {
width: 100%;
height: 75px;
position: fixed;
z-index: 1000;
background-color: Gray;
top: 0;
left: 0;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-webkit-transition-property: -webkit-transform;
transition-property: transform;
}
.header--hidden {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
} <header class="header" role="banner">
<div id=Image>
<a href="http://localhost/lab/">
<img src="http://localhost/lab/includes/images/logo-small.png">
</a>
</div>
<div id="menu">
<ul id="menu">
<li><a href="http://localhost/lab">Home</a>
</li>
<li><a href="http://localhost/lab/projects">Projects</a>
</li>
<li><a href="http://localhost/lab/videos">Videos</a>
</li>
<li><a href="http://localhost/lab/contact">Contact</a>
</li>
<li><a href="http://localhost/lab/about">About</a>
</li>
</ul>
</div>
</header>Check out the original source of this code.