Есть код, который скрывает меню при прокрутке вниз и показывает при прокрутите вверх.
Проблема в том, что когда даже на 1 пиксель вверх скроллишь, оно появляется.
Нужно сделать так, чтобы при скролле вверх оно появлялось через определенное расстояние (например на 250 пикселей вверх).
var header = $('#header'),
scrollPrev = 0;
$(window).scroll(function() {
var scrolled = $(window).scrollTop();
if ( scrolled > 100 && scrolled > scrollPrev ) {
header.addClass('header-out');
} else {
header.removeClass('header-out');
}
scrollPrev = scrolled;
});
#header {
transition: all 0.5s;
padding: 24px 0;
position: fixed;
width: 100%;
color: #ffffff;
background-color: #000000;
}
#header.header-out {
transform: translateY(-100%);
}
section {
height: 2000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="header">
<p>Меню топ</p>
</header>
<section>
</section>