How to run a javascript function when a user hits a certain point on a page?

Question

What is the best way to run a JavaScript function when a user reaches a certain point on a web page?

Answer 1

Check the offset of the document with document.documentElement.scrollTop

let called = false
document.addEventListener('scroll', e => {
  if (document.documentElement.scrollTop >= 500) {
    if (called) return
    called = true
    calledEvent()
  }
})

function calledEvent() {
  console.log('hello')
}

body {
  height: 1000px;
}