Check if scrolled past div with JavaScript (no jQuery)

You should be able to use the following:

if(window.scrollY >(element.offsetHeight + element.offsetTop)){
    // do something 
}

Listen for the scroll event. To find the current scroll position, you can call the scollY method.

To get the Y coordinate of the top of an element, you can use the element's offsetTop. Because the element has a height, we want to add the height to our calculation.

That's it.

window.addEventListener("scroll", function() {
  var elementTarget = document.getElementById("section-2");
  if (window.scrollY > (elementTarget.offsetTop + elementTarget.offsetHeight)) {
      alert("You've scrolled past the second div");
  }
});
.section-1 {
  height: 400px;
  width: 100%;
  background: green;
}

.section-3 {
  height: 400px;
  width: 100%;
  background: orange;
}
<div class="section-1"></div>
<div id="section-2">Scroll past this div</div>
<div class="section-3"></div>

Tags:

Javascript