0

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');
ldoroni
  • 107
  • 2
  • 9
  • possible duplicate of [How to detect scroll position of page using jQuery](http://stackoverflow.com/questions/17441065/how-to-detect-scroll-position-of-page-using-jquery) – Brigand Aug 15 '13 at 10:31
  • How do you identify the "specific area"? Is it simply the position (i.e. bottom of the page) or a specific element? – Felix Kling Aug 15 '13 at 10:32
  • @FelixKling i talk about spesific position. here i talk about the bottom of the page – ldoroni Aug 15 '13 at 10:35
  • if you are willing to use jQuery, look at jQuery waypoints – John Dvorak Aug 15 '13 at 10:36

1 Answers1

0

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);
  }
});
Trendy
  • 460
  • 2
  • 12
  • 5
    From the `javascript` tag description: *"Unless a tag for a framework/library is also included, a pure JavaScript answer is expected."* – Felix Kling Aug 15 '13 at 10:32