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.

Solution 1

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.

Solution 2

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

    }

});

Comments

[NT_]

This code is not efficient. and it will fire multiple times.

[Fabrício Matté]

@ngen Make sure to add a check to don't fire multiple simultaneous Ajax requests, if you didn't already. It's out of the scope of the question and should be done already in any good project. But I can provide the answer to that as well if requested.

[Fabrício Matté]

I've added how to prevent multiple requests from firing without interfering in possible concurring ajax requests from other functions, even though this is really basic.

[NT_]

Thought so. So what if i go back up and come back down?. You didn't get the point. Jquery's .scroll() function is more efficient than this. I don't think that the asker bothers about this.

[Fabrício Matté]

The processing flag will prevent any Ajax request coming from that function while and only while an AJAX request from that function is running. After the AJAX call completes, and you scroll past the 70% again, it'll fire again and repeat the cycle.

[NT_]

If the user goes back up and comes back while the function is running.. say , an animation. it will not function always as the user intends.

[Fabrício Matté]

I still don't get your point. It prevents multiple requests from being fired simultaneously. If the user scrolls up and down really fast (which is unlikely) while the AJAX function is running, nothing will happen and the content will be loaded only once. Now, about implementation/animations etc, OP didn't even touch that matter so it's irrelevant.

[NT_]

Jquery threads the processes unless you sequence the upcoming functions in callbacks. If it threads, your processing will become true while the function is actually running.

[Fabrício Matté]

Upcoming functions? Threads? The function itself will always return false no matter how many times it's called while processing equals to true. It ensures that only one instance of it is being ran at a time. If OP has upcoming functions (which is completely out of the question's scope AGAIN), he may add the processing=false; to when the AJAX call actually completes, as specified in my comment in the answer's code.

[Fabrício Matté]

Added JSFiddle examples to my answer, the height value and trigger offsets may be a little off but it's good enough to have an idea. Feel free to edit them in case you have any question.

[Daedalus]

@FabrícioMatté Just as a note, your fixed example seems to have roughly the same problem as your percent example.

[Fabrício Matté]

@Daedalus The "same" problem? I didn't notice any problem except that it'd load twice if I scrolled too fast, that's because the offset was too large compared to the div size. I increased the div size and added a note, try it later. :P

[Daedalus]

@FabrícioMatté To be specific, the problem of the page getting perpetually longer every time a div is loaded; the event occurs, div is loaded, page gets longer. Scrolling down toward page bottom, another is loaded, page gets longer. Rinse, repeat, etc.

[Fabrício Matté]

Oh I see. The page does get larger every time content is loaded, as I assumed that OP was trying to edit/make an infinite scroller or similar. The issue I addressed was triggering the AJAX request "earlier" each time the document height increases. :)

[Fabrício Matté]

Added an edit to the end of my answer, as I noticed my fix wasn't very clear with @Daedalus's comment.

[Bibhu]

@FabrícioMatté - Awesome answer. Thanks a ton :)

[Algoman]

That's a good answer, but it should also make sure that 0 < $(document).height() - $(window).height() - 700 beforehand, because otherwise you'll do the requests already at the top of the screen, which can result in a lot of requests - even infinitely many if the request doesn't change the document height.