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>