I think you may have noticed lots of web pages or websites menu show and hide while you scroll up and down the web 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 are writing some Jquery code to simplify this.
Here we are explaining how to create script for hide and show menu while scrolling web page. first we are creating html menu and write css code.
Example
The following example result will be show the top of menu, than viewer’s display once the user scrolls down to a certain menu will be hide and when viewer scroll up than menu will be display.
<!DOCTYPE html>
<html>
<head>
<title>How hide div on scroll down show on scroll up using jquery</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;
}
#Menu {
height:50px;
width:inherit;
background:#6c8cd5;
display:none;
position:fixed;
top:0;
left:0;
}
#Menu a{
padding:15px;
font-size:18px;
color:#000;
}
#Menu a:hover{
color:#333;
}</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="Menu">
<a href="index.html">Home</a> |
<a href="#">About Us</a> |
<a href="#">Contact US</a>
</div>
<script>
$(document).ready(function() {
var load_flag = true;
$(document).scroll(function() {
var mywindow = $(window);
var mypos = mywindow.scrollTop();
var up = false;
var newscroll;
mywindow.scroll(function () {
newscroll = mywindow.scrollTop();
if (newscroll > mypos && !up) {
$('#Menu ').fadeOut();
up = !up;
console.log(up);
} else if(newscroll < mypos && up) {
$('#Menu ').fadeIn();
up = !up;
}
mypos = newscroll;
});
});
});
</script>
</body>
</html>My name is Mukesh Jakhar and I am a Web Application Developer and Software Developer, currently living in Jaipur, India. I have a Master of Computer Application in Computer Science from JNU Jaipur University. I loves to write on technology and programming topics. Apart from this, I love to travel and enjoy the beauty of nature.