jquery show/hide menu on scroll

If you are a little more enthusiastic on learning jQuery, then, this trick to show/hide navigation menu depending upon whether a user is scrolling up or down might be a good one to understand how jquery works.

Here, the only thing you will need to check is the scroll position of the page. Then, you will compare the new scrolled position to the previous position. If you find the user is scrolling upwards, then, you can show the navigation which was hidden so far and when the user scrolls down, hide that navigation.

This way, you can use the space occupied by navigation on the top of the page if it was made fixed or sticky to show other contents.

Lets have a look at the code then.

<script>
  var previousScroll = 0;
  $(window).scroll(function(){
	var newScroll = $(this).scrollTop();
    if(newScroll < previousScroll){
	  $('#mainNav').addClass('showNav');
    }else{
	  $('#mainNav').removeClass('showNav');
    }
	  previousScroll = newScroll;
    })
</script>	

Here, we set the previous scroll previousScroll value 0 as we won't have this value before the user actually starts scrolling the page for the first time. We can't make calculations without a numeric value. Hence, value 0 is set at the beginning.

Next, we run the function when the window is scrolled. newScroll will store the newly scrolled value.

Then, we compare the two values.

If the newScroll value is smaller than the previousScroll value, that will effectively resemble the situation where the user is scrolling back to the top. In that case, we will add a class to the main navigation which will make the main navigation appear on top of the page.

If the newScroll value is greater than the previousScroll value, the user must be scrolling downwards reading the page contents or searching something else. In such case, there's no need to show the main navigation, so, we will remove the newly added class in such scenarios.

The newly added class will hold the css properties to keep the main navigation on top of the page with position fixed. You can add more properties to animate it to your liking.

Something like this would work wonder on the animation. Here, we assume you have the navigation set as fixed and top around -50px in general with transition set to 0.3s. Then, all you have to do is change the value to top 0 on negative scroll. That would make the navigation appear and go away beautifully in your page.

.showNav{
  top:0;
}

Since the previousScroll needs to change everytime the page is scrolled, we set the previousScroll value equal to the newScroll value, everytime the user scrolls through the page.

Hence, the newScroll value keeps on changing with the scroll and that would set the previousScroll value equal to the newScroll value.

Here's a demo.

---

0 Like 0 Dislike 0 Comment Share Tweet