DEV Community

Areeb ur Rub
Areeb ur Rub

Posted on • Updated on

Hide NavBar as Scroll down, in less than 10 lines of javascript;

#javascript #tutorial #webdev #css

Buy Me A Coffee

You must have seen this effect on several website, where you scroll down and navigation bar automatically hides and reappears when scroll up.

So here's basic page in which I have implemented this,in just 10 lines of javascript.


 lastScrollTop;
navbar = document.getElementById('navbar');
window.addEventListener('scroll',function(){
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if(scrollTop > lastScrollTop){
    navbar.style.top='-80px';
  }
  else{
    navbar.style.top='0';
  }
  lastScrollTop = scrollTop;
});
Enter fullscreen mode Exit fullscreen mode

How it's working

Here, the position of the navbar is being altered using javascript.

First we create a variable which stores position of Page;

Then we get the scroll position using: window.pageYOffset or for some browser 'document.documentElement.scrollTop';

Then check that weather the page is scrolled up or down;

Then save the scroll vale to the variable;

This is done every time whenever the page is scrolled, as all this lies under a EventListener.

Check the JS in codepen it will make it more clear

Check out my other posts as well

areeburrub

Have the frost glass effect on your website. See How?

Areeb ur Rub ・ May 20 '21

#css #webdev #showdev #tutorial

Follow me for more

areeburrub image

Areeb ur Rub

Arduino | Python | TypeScript | Next Js | Love learn making things

Top comments (13)

Collapse
 
pavelloz profile image
Paweł Kowalski • • Edited

I think if you removed all your javascript, so its 0 lines of javascript, and removed position:fixed; from css it would hide as well while scrolling. ;)

Collapse
 
areeburrub profile image
Areeb ur Rub •

Nice Suggestion, but then it won't appear again when scroll up and you have to reach the Navigation bar back to top.

The Navigation bar is something which should be easily accessible, don't you think after scrolling on a long feed user want NavBar to move to the another page instantly.

Hope you get my point 😄

Collapse
 
hasnaindev profile image
Muhammad Hasnain •

Sure but if a user has scrolled down and want to access navigation bar, what happens then? Think a little about UX. ;)

Collapse
 
pavelloz profile image
Paweł Kowalski •

Im thinking about UX, thats why i propose not using js in this case. ;)

Collapse
 
rwc profile image
R-W-C • • Edited

Thanks for this. Really appreciated.

The jquery version taking all comments in concern ;-)

$(document).ready(function() {
    onScroll();
});

function onScroll() {   
    var lastScrollTop, $bar = $('#navbar') , height = $bar.height(), 
        $window = $(window), offset = 10;

    $window.on('scroll',function()  {       
        var scrollTop = $window.scrollTop();
        $bar.css({ top: scrollTop > lastScrollTop && scrollTop > offset ? -height : 0 });
        lastScrollTop = scrollTop; 
    });     
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jonrandy profile image
Jon Randy 🎖️ • • Edited

I think it needs some refinement - you lose the menu if you scroll down so much as 1 pixel. Similar functionality on websites is more complex than this

Collapse
 
hasnaindev profile image
Muhammad Hasnain • • Edited

I agree with Areeb. You could write an entire library just to handle the navigation bar and add more complexity but I don't think that's the point. Most of the posts here are written by beginners, for beginners.

Collapse
 
jonrandy profile image
Jon Randy 🎖️ •

Well, you could add one or two lines to stop it disappearing when you scroll as little as one pixel down, which is just plain irritating for the the user

Collapse
 
areeburrub profile image
Areeb ur Rub •

Right, it can be conplex but it's the simplest way to do so.

Collapse
 
henryhu profile image
sirhenryhu •

Hi Areeb, thanks for sharing this. I'm trying to make a bottom sticky nav menu for mobile devices and tried your code but it only works for the ones sticky to the top. Could you please enlighten me on how to achieve the goal for the bottom sticky nav menu hiding on scroll down and slide out on scroll up?

Collapse
 
vincentshtick profile image
vincent-shtick •

You should change the if statement to also include an offset since if the bar disapears immediatly it might look strange ui wise

if(scrollTop > lastScrollTop && scrollTop > your desired offset){

Collapse
 
blinkeujennie23 profile image
Blinkeu Jennie 2016 •

Its not working on safari. The navbar jumps to the top when scrolling all the way up

Collapse
 
aleksejs profile image
Aleksejs Aleksejevs •

This is because of safari elastic scrolling/bounce effect, you need to be very precise to scroll it to the top.
Just add
if(scrollTop > lastScrollTop && scrollTop > 10)

And it should be fine

View full discussion (13 comments)

Read next

sandygalabada profile image

Blur page body when hover on Nav Bar

Sandy Galabada -

safdarali profile image

5 Steps You Must Follow to Deploy a React App on Hostinger

Safdar Ali -

sotergreco profile image

JavaScript - A Blessing or a Curse?

Sotiris Kourouklis -

igadii profile image

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

Idris Gadi -