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. 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.
<!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>
