当用户到达页面中的特定元素时，如何执行JS函数？

Question

How can I automatically execute a JavaScript function when the user reaches a specific position on the page?

When I scroll down to the bottom of the page, an AJAX-call shall be executed that loads more content so that you can scroll down further.

Nothing should happen if the user scrolls down and then scrolls up again by the same distance.

This is the call of the ajax function that I have and want to execute:

refresh('refresh_status', 'refresh_status.php', '', '', '', 'refresh');

Answer 1

Fixed for default JavaScript: http://cdpn.io/xdjmG

HTML:

<div id="page" style="min-height: 10000px;">
    <div id="anotherElement" style="margin-top: 500px; min-height: 500px; background-color:red"></div>
</div>

JavaScript, will alert when page reaches "anotherElement":

window.addEventListener('scroll', function(){
  var place = document.body.scrollTop;
  var alertOn = document.getElementById('anotherElement').offsetTop;
  if(place > alertOn){
    alert('Function execute here');
    this.removeEventListener('scroll', arguments.callee, false);
  }
});