Скрыть header при скролле jQuery

Question

Есть код, который скрывает меню при прокрутке вниз и показывает при прокрутите вверх.

Проблема в том, что когда даже на 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>

Answer 1

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

let header = $('#header');
let scrollPrev = 0;
let scrollToTop = 0;

$(window).scroll(function() {
  var scrolled = $(window).scrollTop();
  if ( scrolled > 100 && scrolled > scrollPrev ) {
    header.addClass('header-out');
    scrollToTop = scrolled;
  } else if(scrolled <  scrollToTop - 250  || scrolled < 250 ) {
    header.removeClass('header-out');
  }
  scrollPrev = scrolled;   
});

Answer 2

Вам достаточно добавить еще одно сохранение результатов позиции в момент когда меню было показано последни раз:

const $header = $("#header")
let prevScroll
let lastShowPos

$(window).on("scroll", function() {
  const scrolled = $(window).scrollTop()

  if (scrolled > 100 && scrolled > prevScroll) {
    $header.addClass("header-out")
    lastShowPos = scrolled
  } else if (scrolled <= Math.max(lastShowPos - 250, 0)) {
    $header.removeClass("header-out")
  }
  prevScroll = scrolled
})

p {
  margin: 0;
}

#header {
  position: fixed;
  width: 100%;
  color: #ffffff;
  background-color: red;
  padding: 20px;
  transition: all 0.5s;
}

#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>

БЛОГ НА HUSL

Скрыть header при скролле jQuery

Ответы (2 шт):