how to make navbar reappear on scroll to top

Question

so I want to combine these two questions: Navbar scroll down disappear, scroll up reappear w/ slide Bootstrap 4 - How to make fixed-top navbar disappear on scroll

I understood how to make it disappear on scroll on the height I want but I couldn't figure out how to make it reappear when the user scrolls up a little bit.

Answer 1

Please follow the example as I mentioned for the "navbar reappear on scroll to top"

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

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

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

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

    // Make scroll more than delta
    if (Math.abs(lastScrollTop - st) <= delta)
        return;

    // If scrolled down and past the navbar, add class .nav-up.
    if (st > lastScrollTop && st > navbarHeight) {
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if (st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

// Hide header on scroll down
  var didScroll;
  var lastScrollTop = 0;
  var delta = 5;
  var navbarHeight = $('header').outerHeight();

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

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

  function hasScrolled() {
   var st = $(this).scrollTop();
   
   // Make scroll more than delta
   if(Math.abs(lastScrollTop - st) <= delta)
    return;
   
   // If scrolled down and past the navbar, add class .nav-up.
   if (st > lastScrollTop && st > navbarHeight){
    // Scroll Down
    $('header').removeClass('nav-down').addClass('nav-up');
   } else {
    // Scroll Up
    if(st + $(window).height() < $(document).height()) {
     $('header').removeClass('nav-up').addClass('nav-down');
    }
   }
    
   lastScrollTop = st;
  }

body {
   background: #eee;
   padding-top: 40px;
   margin: 0;
  }

  header {
    background: #ddd;
    height: 50px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
    text-align: center;
  }

  header li {
    list-style: none;
    display: inline-block;
  }

  header a {
    color: #222;
    text-decoration: none;
    padding: 0 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .nav-up {
    top: -50px;
  }

  main {
    height: 2000px;
  }

  footer { 
    background: #ddd;
    height: 45px;
    line-height: 45px;
    text-align: center;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="nav-down">
   <ul>
  <li><a href="">menu item</a></li>
  <li><a href="">menu item</a></li>
  <li><a href="">menu item</a></li>
   </ul>
 </header>
 <main>
  
 </main>
 <footer>
  Footer
 </footer>