как сделать так, чтобы navbar снова появлялся при прокрутке вверх

Question

, поэтому я хочу объединить эти два вопроса: Исчезнет прокрутка навигационной панели вниз, снова появится прокрутка вверх с слайдом Bootstrap 4 - Как заставить навигационную панель с фиксированной верхней панелью исчезать при прокрутке

Я понял, как заставить его исчезать при прокрутке на нужной высоте, но я не мог понять, как заставить его появляться, когда пользователь немного прокручивает.

Answer 1

Пожалуйста, следуйте примеру, как я упомянул для «навигационной панели, появляющейся при прокрутке вверх»

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>