How to find out if an element is passed while scrolling?

Question

I am trying to find out when I have passed certain element while scrolling.

  const elementTarget = document.getElementById('sidebar');

  window.addEventListener('scroll', () => {
    if (window.scrollY > elementTarget.offscrollTop) {
      console.log('passed an element');
    }
  })

sample code: https://codepen.io/RomanKomprs/pen/LMrPNJ

EDITED: The code above doesn't work. When I scroll down and the scrollY is bigger than the offset of my sidebar element the condition doesn't trigger. What am I doing wrong?

Answer 1

Replace offscrollTop with getBoundingClientRect().top

const elementTarget = document.getElementById("sidebar");

window.addEventListener("scroll", () => {
  if (window.scrollY > elementTarget.getBoundingClientRect().top) {
    console.log("passed an element");
  }
});

Try it

Answer 2

First, you have to elements with equal id; Second you need to use .offsetTop for get value of offset;

if (window.scrollY > elementTarget1.offsetTop) {
  console.log('passed an element');
}

codepen.io/anon/pen/LMrYMZ