How hide div on scroll down show on scroll up using jquery

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.

CSS AND HTML AND JQUERY CODE

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>
Mukesh Jakhar - PHP Web Developer
Mukesh Jakhar

This is Mukesh Jakhar. I’m a professional web developer with 3+ years experience. I am always ready for freelance work and i am writing blogs in my free time. I love to learn new technologies and share with others.

I founded PHPKIDA in September 2015. The focus of this website to provide web development tutorials of PHP, WordPress, CodeIgniter, Jquery, MySQL, HMTL, CSS etc and sharing solution to problems which i already solved.

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.