Hiding and Revealing things with JavaScript pageYOffset

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!

Comments

[Nicolai Høeg Pedersen]

Do not use scroll event for this. IntersectionObserver is born for this kind of stuff and performs way better:
developer.mozilla.org/en-US/docs/W...

[Nicolai Høeg Pedersen]

And using pageYOffset is a px based rule - might not be the best option when doing responsive work. The Intersection ratio is an alternative to consider...

[Tatenda Carl Sakarombe]

I was wondering of ways I could have changed it in such a way that it would not respond to scrolling after a number to pixels because in my mobile version of the website I made, it would change the content of what I wanted to be changed after a number of pixels. Long story short, this method only worked of laptop but not on mobile so I had to hide whatever I did on laptop for mobile to avoid the bug. Thanks Nicolai for telling me about Intersection ratio and I will look further into it

[Tatenda Carl Sakarombe]

Wow, thanks. I never knew about IntersectionObserver. It really performs much better