Did you find this useful?
Socialize it today.


Show/Hide Menu While Scrolling on a Web Page

Thursday, February 07, 2013

You may have noticed that on some web pages, as you scroll up and down the page, various menus may appear either at the top, bottom, or sides of the page. In this tutorial, we are going to cover how to show and hide a menu depending on where the user is on the screen. We can leverage some jQuery code to simplify this. The example shown below should work across all major browsers such as Internet Explorer, Chrome, Firefox, Safari, and Opera.


Example

The following example will result in a sub-menu appearing at the top of the viewer's display once the user scrolls down to a certain portion of the web page. You can see it in action by clicking on the demo link. A new page will open and you can use your mouse to scroll up and down the page. Once you scroll down to a certain point in the page, the header will no longer be visible and the jQuery code will show the sub-menu. As you scroll up, the sub-menu will be hidden as the header comes within the display. You can control when the sub-menu is displayed by modifying this portion of the jQuery code. var headerBottom = headerTop + 120;. If you increase the number, you are configuring the sub-menu to be shown or hidden when you scroll farther down on the page. The sub-menu can be displayed anywhere on the page by modifying the appropriate CSS style properties.


demo


<!DOCTYPE html>
<html>
<head>
<title>Show/Hide Sub-Menu Demo</title>
<style>
html, body {
margin:0;
padding:0;
width:100%;
font-size:1em;
color:#ffffff;
}

#header {
height:80px;
background:#1240AB;
padding:20px;
font-size:3em;
border-bottom:3px solid #4671D5;
}

#subMenu {
height:50px;
width:inherit;
background:#6c8cd5;
display:none;
position:fixed;
top:0;
left:0;
z-index:500;
opacity:.9;
padding:15px;
font-size:2.5em;
}

#content {
margin:20px;
font-size:2.25em;
color:#232323;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div id="header">Welcome to my website!</div>
<div id="subMenu">Some menu links, social icons could go here...</div>
<div id="content">
	<!-- Your HTML Content -->
</div>
<script>
    $(document).ready(function() {
        var headerTop = $('#header').offset().top;
        var headerBottom = headerTop + 120; // Sub-menu should appear after this distance from top.
        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop(); // Current vertical scroll position from the top
            if (scrollTop > headerBottom) { // Check to see if we have scrolled more than headerBottom
                if (($("#subMenu").is(":visible") === false)) {
                    $('#subMenu').fadeIn('slow');
                }
            } else {
                if ($("#subMenu").is(":visible")) {
                    $('#subMenu').hide();
                }
            }
        });
    });
</script>
</body>
</html>

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Professional jQuery JavaScript and jQuery: The Missing Manual HTML CSS and JavaScript Editor