How to Make Navigation Appear on Scroll With jQuery

In this tutorial i am going to show you how you can appear your navigation menu on scroll using jQuery.
There are following steps:-

1. Create fixed position menu and hide it

 .fixed-nav {
      position: fixed;
      top: 0;
      width: 100%;
      display:none;
 }

2.

fadeIn and fadeOut menu on window scroll even

fadeIn if we’ve scrolled past the 100px(based on height of your menu) mark from the top of the page, otherwise fade back out.

<script type="text/javascript">
  (function ($) {
    $(document).ready(function () {
      $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
          $('.fixed-nav').fadeIn('slow');
        } else {
          $('.fixed-nav').fadeOut(500);
        }
      });
    });
  })(jQuery);
</script>

You can view online demo here: Navigation Demo

Add a Comment

Your email address will not be published. Required fields are marked *