How do I trigger or stop a jQuery function based on scroll position?

Question

I'm working on a website which has a header that, when the scrollTop() value is more than 1/4 of the browser's height, animates up and down on and off the screen depending on whether the user is scrolling up or down. For the home page, the header changes background and text color after the said scrollTop() value to accommodate a video background.

However, the headerScrollEvents() function, which adds the "show" (header sliding down), "hide" (header sliding up) and "active" (header changing background and text color) classes to #header when scrolled, is still running when the scroll position number is less than 1/4 of the browser's height. The goal is to prevent those classes from being added once the user scrolls upward from that scrollTop() value to the very top.

How do I get a jQuery function to trigger or stop upon reaching certain scroll positions?

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;
}

Use https://api.jquery.com/on/ and https://api.jquery.com/off/ — bassxzero, Oct 01 '19 at 02:07
bind to the scroll event & then check where it's up to? https://stackoverflow.com/questions/487073/how-to-check-if-element-is-visible-after-scrolling & https://kylewbanks.com/blog/Detecting-Scroll-Events-And-Getting-Scroll-Offset-With-jQuery — EGC, Oct 01 '19 at 03:41

score 0 · Answer 1 · answered Oct 01 '19 at 10:06

Instead of listening to scroll event you can use Intersection Observer for this.

Based on this example I created a jsfiddle for you. I modified it to make the div you are watching bigger so it can be clearer how this works. You obviously would set the dimensions of the div to 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>

How do I trigger or stop a jQuery function based on scroll position?

1 Answers1