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!

22 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

Leave a Reply

Contact Us

Subscribe

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