23 February 2022

Show menu bar in scroll up, hide in scroll down using Javascript with Bootstrap

Now a days most of the sites are using this kind of nav bar, like when we are scrolling down hiding the menu nav bar, When we are scrolling up showing the menu nav bar, actually it is really nice one. here we are going to create like that kind of functionality only using jquery javascript and with Bootstrap menu. Let's see the code.

DOWNLOAD LIVE DEMO

HTML CODE

<body>
<header>
<nav class="navbar navbar-default">
  <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">

      .
      <!-- Nav bar goes here... -->

      .
    </div>
    <!-- /.navbar-collapse --> 
  </div>
  <!-- /.container-fluid --> 
</nav>
</header>


<div class="bodycontainer container">
    Body Content Goes here...
</div>


<footer>
  <div class="container">
    Footer Goes here..
  </div>
</footer>
  
</body>

I have already posted bootstrap responsive menu nav bar. that code only i have used for this navigation bar.

SCRIPT FILES

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" 
                                                 rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

JAVA SCRIPT

<script type='text/javascript'>
$(function(){
// Hide Header on on scroll down
var Checkscroll;
var LastcrollScroll = 0;
var delta = 5;
var menuHeight = $('header').outerHeight();


$(window).scroll(function(event){
    Checkscroll = true;
});


setInterval(function() {
    if (Checkscroll) {
        hasScrolled();
        Checkscroll = false;
    }
}, 250);


function hasScrolled() {
    var scroll = $(this).scrollTop();

    if(Math.abs(LastcrollScroll - scroll) <= delta)
        return;

    if (scroll > LastcrollScroll && scroll > menuHeight){
        // Scroll to Down 
        $('header').removeClass('navbar-header').addClass('nav-up');
    } else {
        // Scroll to Up
        if(scroll + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('navbar-header');
        }
    }
    LastcrollScroll = scroll;
}
});

</script>

CSS

<style type='text/css'>
body {
    padding-top: 80px; /* Show the content from here */
}

header {
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
}

.nav-up {
    top: -50px; /* we can change the hide as we need */
}

.bodycontainer {
    height: 4000px;  /* For testing i have given this much height */
}
</style>

I hope this code is really helpful to you. Keep visiting for more articles like this. Stay connected with us.