Как запустить или остановить функцию jQuery в зависимости от положения прокрутки?

Question

Я работаю над сайтом с заголовком, который, когда значение scrollTop() превышает 1/4 высоты браузера, анимирует вверх и вниз по экрану и в зависимости от того, прокручивает ли пользователь вверхили вниз. Для домашней страницы заголовок меняет фон и цвет текста после указанного значения scrollTop(), чтобы приспособить фон видео.

Однако функция headerScrollEvents(), которая добавляет «show» (заголовок скользит вниз)Классы «скрыть» (заголовок скользящий вверх) и «активный» (цвет фона и цвет текста изменяются в заголовке) до #header при прокрутке, все еще работает, когда номер позиции прокрутки меньше 1/4 высоты браузера. Цель состоит в том, чтобы предотвратить добавление этих классов, когда пользователь прокручивает вверх от этого значения scrollTop() до самого верха.

Как получить функцию jQuery для запуска или остановки при достижении определенных позиций прокрутки?

JS:

function headerScrollEvents() {

    var yPos = $(window).scrollTop();

    $(window).scroll(function() {
        var newYPos = $(this).scrollTop();
        if (newYPos > yPos) {
            $("#header").removeClass("show active").addClass("hide");
        } else {
            $("#header").removeClass("hide").addClass("show active");
        }

        yPos = newYPos;
    });

}

$(window).scroll(function() {

    if ( $(window).scrollTop() <= $(window).height() / 4 ) {
        $("#header").removeAttr("class");
    } else if ( $(window).scrollTop() >= $(window).height() / 4 ) {
        headerScrollEvents();
    }

});

CSS:

#header {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 25;
    padding: 48px 0;
    transition: transform 500ms ease, background 500ms linear;
    background: #000;
}
#header.hide {
    transform: translateY(-100%);
}
#header.show {
    transform: translateY(0%);
}
#header.active {
    background: #fff;
}

Answer 1

Вместо прослушивания события прокрутки вы можете использовать для этого Intersection Observer .

На основе этого примера Я создал jsfiddle для вас. Я изменил его, чтобы увеличить div, который вы смотрите, чтобы было понятнее, как это работает. Очевидно, вы бы установили размеры div в 0px.

let observer = new IntersectionObserver(entries => {
  if (entries[0].boundingClientRect.y < 0) {
    console.log("Past the yellow div!");
  } else {
    console.log("Not past the yellow div");
  }
});
observer.observe(document.querySelector("#pixelToWatch"));

body {
  padding: 0;
  position: relative;
}

#pixelToWatch {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 75%;
  left: 0;
  background: yellow;
}

header {
  position: fixed;
  width: 100%;
  background-color: green;
  top: 0;
}

section {
  padding-top: 100px;
  min-height: 200vh;
  background-image: linear-gradient(25deg, red, blue);
  color: white;
}

<header>
  <p>I'm a header </p>
</header>
<div id="pixelToWatch"> </div>

<section>
  <h1>I have a headline </h1>
  <p>
    And some content
  </p>
</section>
<section>
  <h1>I have a headline </h1>
  <p>
    And some content
  </p>
</section>