Load ajax when scroll reaches 80%

Question

I am using the following code which is working when the scroll bar reaches the botttom,

if($(window).scrollTop() == $(document).height() - $(window).height()){

I however want that the ajax is fired when i reached 70% of the scroll not 100.

Answer 1

A quick google search for get percentage scrolled down brings up this page as the first result(with the code below, which more or less does what you want). I feel like you didn't attempt any research before asking here.

$(document).scroll(function(e){

    // grab the scroll amount and the window height
    var scrollAmount = $(window).scrollTop();
    var documentHeight = $(document).height();

    // calculate the percentage the user has scrolled down the page
    var scrollPercent = (scrollAmount / documentHeight) * 100;

    if(scrollPercent > 50) {
        // run a function called doSomething
       doSomething();
    }

    function doSomething() { 

        // do something when a user gets 50% of the way down my page

    }

});

Answer 2

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.