Load ajax when scroll reaches 80%

by

Provided your current check is firing when scrolled to the page’s bottom, you can try some basic arithmetics:

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){
                                          //where 0.7 corresponds to 70% --^

Make sure to add a check to don’t fire multiple simultaneous Ajax requests, if you didn’t already.

This is rather out of the scope of the question, but if you want an example of how to prevent multiple requests from being fired simultaneously:

Declare a global var, e.g. processing.

Then incorporate it in your function:

if (processing)
    return false;

if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){
    processing = true; //sets a processing AJAX request flag
    $.post("url", '<params>', function(data){ //or $.ajax, $.get, $.load etc.
        //load the content to your div
        processing = false; //resets the ajax flag once the callback concludes
    });
}

That’s a simple example of using a var to keep track if there is an active Ajax request for your scroll function or not, and it doesn’t interfere with any other concurring Ajax request which you may have.

Edit: JSFiddle example

Please note that using a % to measure the document height might be a bad idea, considering that the document’s height will increase each time you load something, making it trigger the Ajax request being relatively more far from the bottom of the page (absolute-size wise).

I’d recommend using a fixed value offset to prevent that (200-700 or so):

if ($(window).scrollTop() >= $(document).height() - $(window).height() - 700){
                                 // pixels offset from screen bottom   --^

Example: JSFiddle

Edit: To reproduce the issue in the first code with percentages, load 50 divs into it. When you load the next div, it’ll add only 2% to the total document’s height, meaning the next request will be triggered as soon as you scroll these 2% back to the 70% of the document’s height. In my fixed example, the defined bottom offset will load new content only when the user is at a defined absolute pixels range from the bottom of the screen.

More Related Contents:

  1. jQuery load more data on scroll
  2. javascript: detect scroll end
  3. How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?
  4. Scrolling Overflowed DIVs with JavaScript
  5. How to make page loaders/animations/transitions
  6. How to manage a redirect request after a jQuery Ajax call
  7. Smooth scrolling when clicking an anchor link
  8. How to scroll an HTML page to a given anchor
  9. Access Control Request Headers, is added to header in AJAX request with jQuery
  10. jQuery XML error ‘ No ‘Access-Control-Allow-Origin’ header is present on the requested resource.’
  11. JavaScript/jQuery to download file via POST with JSON data
  12. How to scroll to specific item using jQuery?
  13. Prevent Page Load on Jquery Form Submit with None Display Button
  14. How to pass parameters in GET requests with jQuery
  15. jquery submit form and then show results in an existing div
  16. Fade In on Scroll Down, Fade Out on Scroll Up – based on element position in window
  17. Stop fixed position at footer
  18. Show a progress bar for downloading files using XHR2/AJAX
  19. Use JSONP to load an html page
  20. prevent touchstart when swiping
  21. AJAX: Submitting a form without refreshing the page
  22. Javascript – Stop form submit depending on ajax response [duplicate]
  23. How do I resend a failed ajax request?
  24. Abort new AJAX request before completing the previous one
  25. When loading an html page via ajax, will script tags be loaded?
  26. jQuery – bind event on Scroll Stop
  27. How to import JQuery into a Typescript file?
  28. Is there any size limitation for ajax post?
  29. Automatically scroll down chat div
  30. How to return an array from an AJAX call?

Leave a Comment