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

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.

scroll up show menu bar
DOWNLOAD                              LIVE DEMO

<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... -->
    <!-- /.navbar-collapse --> 
  <!-- /.container-fluid --> 

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

  <div class="container">
    Footer Goes here..

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

<link href="//" 
                                                 rel="stylesheet" id="bootstrap-css">
<script src="//"></script>
<script src="//"></script>

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

    Checkscroll = true;

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

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

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

    if (scroll > LastcrollScroll && scroll > menuHeight){
        // Scroll to Down 
    } else {
        // Scroll to Up
        if(scroll + $(window).height() < $(document).height()) {
    LastcrollScroll = scroll;


<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 */

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


  1. I was glad to discover this site. I have to thank you for your minute because of this fantastic read!! I certainly appreciated all of it and I have you book-set apart to see new things in your site.

    Go to this site: top essay writing service