This content originally appeared on DEV Community and was authored by Tatenda Carl Sakarombe
Quite a while ago I was cloning a website and I stumbled on something I was not familiar with. It took me a while to comprehend what exactly I was looking at. The website had a Navigation bar and that bar would hide itself when you would scroll down the page and shows p when you scroll up. Weird!
My first instinct told me that I could fix this using CSS at first.
.nav-bar{
display:hidden;
}
Hidden display was my first guess but I quickly realized that it completely hides the nav-bar (without ever returning). I thought a little harder and came to the conclusion that it has something to do with JavaScript because I believed that it could trigger a function that could execute IF a condition is met. The condition was that IF I scroll down, the nav-bar should be hidden or ELSE, keep showing the nav-bar. In order to deepen this explanation, an example can be provided. Jimmy wants a chocolate but his mother will not give him one. The chocolates are located in the kitchen cabinet. The only way Jimmy can get a chocolate is if he gets it into the kitchen, without his mom knowing, and taking from there. IF mom is not there then he can sneak into the kitchen quietly. But if she does come into the kitchen then he should hide quickly behind the kitchen counter.
Firstly, let us add an event listener. An event listener method allows JavaScript to constantly monitor the browser to see if specific conditions are being met (in your declared function). In this case, we want JavaScript to listen in on a scroll event. I named my function scrollDown because the conditions I shall list down only apply when I scroll down.
window.addEventListener("scroll", scrollDown);
/* 'e' parameter stands for event */
function scrollDown(e) {
let navigation = document.getElementById("nav-bar");
if(window.pageYOffset > 500){
navigation.style.display = "none";
}
else{
navigation.style.display = "block";
}
}
Start by declaring a navigation variable that get the Identification from your html so that Js knows what your are referring to. Secondly, we shall refer to the Y-axis because we are scrolling vertically. JavaScript calls this pageYOffset. So, If the pageYOffset is greater than 500px then hide the navigation. If the condition is false then show it again. The code works but only half way. We need to work on the other half, the part when we scroll up. The problem is that when we scroll up, the nav-bar does not appear again.
window.addEventListener("scroll", scrollUp);
function scrollUp(e) {
let navigation= document.getElementById("nav-bar");
if(window.pageYOffset <500){
navigation.style.display = "block";
}
else{
navigation.style.display = "none";
}
}
Now that the code works, go and have fun with it. Maybe you can change the words of a heading as your scroll down. Or change the color of the nav-bar as you scroll.
Thanks for reading!
This content originally appeared on DEV Community and was authored by Tatenda Carl Sakarombe
Tatenda Carl Sakarombe | Sciencx (2022-01-19T18:31:06+00:00) Hiding and Revealing things with JavaScript pageYOffset. Retrieved from https://www.scien.cx/2022/01/19/hiding-and-revealing-things-with-javascript-pageyoffset/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.