You must have seen this effect on several website, where you scroll down and navigation bar automatically hides and reappears when scroll up.
...
For further actions, you may consider blocking this person and/or reporting abuse
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. ;)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 😄
Sure but if a user has scrolled down and want to access navigation bar, what happens then? Think a little about UX. ;)
Im thinking about UX, thats why i propose not using js in this case. ;)
Thanks for this. Really appreciated.
The jquery version taking all comments in concern ;-)
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
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.
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
Right, it can be conplex but it's the simplest way to do so.
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?
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){
Its not working on safari. The navbar jumps to the top when scrolling all the way up
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