DEV Community

Tatenda Carl Sakarombe
Tatenda Carl Sakarombe

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

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";
    }
}
Enter fullscreen mode Exit fullscreen mode

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";
    }
}
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (5)

Collapse
lukeshiru profile image
Luke Shiru

If you really want to use JavaScript for this, ideally you should avoid using style.display and instead use hidden, so your code would look something like this:

const navigation = document.querySelector("#nav-bar");

window.addEventListener(
    "scroll",
    () => (navigation.hidden = window.pageYOffset >= 500),
);
Enter fullscreen mode Exit fullscreen mode

And then from CSS you can just...

#nav-bar {
    display: block;
}

#nav-bar[hidden] {
    display: none;
}
Enter fullscreen mode Exit fullscreen mode

Still, I would recommend to use CSS only for this, to avoid having a listener in the scroll event of window. You can achieve this using position: sticky. You can learn more about it here and here. It looks way nicer and more performant as well.

Hope this helps!
Cheers!

Collapse
nicped profile image
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...

Collapse
nicped profile image
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...

Collapse
sakaz22 profile image
Tatenda Carl Sakarombe Author

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

Collapse
sakaz22 profile image
Tatenda Carl Sakarombe Author

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