How to Make Your Navigation Appear on Scroll Using jQuery

Check out my other posts and tutorials on Web Development!

Fix it, and hide it

First things first. Make sure you’re navigation has a fixed position and is set to display: none. Here is some sample css:

body {
	margin: 0;
}
#menu {
	position:fixed;
	top:0px;
	width:100%; 
	height:75px; 
	background-color:#DDDDDD;
	color: #FFFFFF;
	z-index:9999;
	display: none;
}

Add jQuery

Add a link to Google’s jQuery library just before your closing body tag, followed by our custom script.

<script src="http://code.jquery.com/jquery-latest.js"></script>

Make it Work

Here we are telling the menu to fade in one we’ve scrolled past the 200px 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() > 200) {
                $('#menu').fadeIn(500);
            } else {
                $('#menu').fadeOut(500);
            }
        });
    });
})(jQuery);
</script>

Easy Peasy!

33 Responses to How to Make Your Navigation Appear on Scroll Using jQuery

  1. Thank you, thank you, thank you! I thought doing this effect was going to be WAY more complex. I was surprised to see that it was so simple. Thanks for teaching a self-taught coder a new trick! You guys rule! 🙂

    Reply
    • Place the jquery code inside if( /Windows|OS X/i.test(navigator.userAgent) ) { jquery code }. This way, it will slide only on windows browsers like chrome, ie, firefox or safari and will not run on mobile devices like android or ios.

      Reply
  2. Hi thanks for the demo.

    I added a click function also to animate scrollTop, similar to what you have below. When I do it sets your code off. Basically it will only work again on page refresh.

    Any help would be great thanks.

    Reply
    • Hi,

      You can edit the code on your squarespace website if you have access to the developmer platform. I believe this is offered on the business package and up.

      Reply
  3. aaaand the search ends. VERY much appreciated. Literally every other tutorial I found was 2-3x as complicated and long as your method

    Reply
  4. I had created fixed navigation but I was not able to effect it on scroll.

    Thanks for the above Jquery codes, Now my navigation looks good when I scroll it, specially the fade effect.

    Reply

Leave a Reply

Contact Us

Subscribe

Subscribe to our blog to receive latest news and tutorials on Web Design, Development, SEO, and more!