carico ajax quando scorrimento raggiunge l'80%

Question

Sto usando il seguente codice che sta lavorando quando la barra di scorrimento raggiunge il botttom,

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

Io però voglio che l'Ajax è sparato quando ho raggiunto il 70% del rotolo non 100.

Answer 1

a condizione che il controllo corrente è sparare quando scorrere verso il basso della pagina, è possibile provare alcuni aritmetica di base:

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

Assicurarsi di aggiungere un controllo per non sparare più richieste Ajax simultanee, se non l'hai già fatto.

Questo è piuttosto fuori dalla portata della questione, ma se si vuole un esempio di come evitare che richieste multiple vengano alimentato simultaneamente:

dichiarare una var globale, per esempio processing.

Poi incorporarlo nella funzione:

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 
    }); 
} 

Questo è un semplice esempio di utilizzo di un var per tenere traccia se v'è una richiesta Ajax attivo per la funzione di scorrimento o no, e non interferisce con qualsiasi altra richiesta Ajax concorrente che potresti avere.

Edit: JSFiddle example

Si prega di notare che l'utilizzo di un% per misurare l'altezza del documento potrebbe essere una cattiva idea, visto che l'altezza del documento aumenta ogni volta che si carica qualcosa, il che rende innescare la richiesta Ajax essendo relativamente più lontano dal fondo della pagina (dimensione assoluta).

Mi consiglia di utilizzare un valore fisso di offset di evitare che (200-700 o giù di lì):

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

Esempio: JSFiddle

Edit: Per riprodurre il problema nel primo codice con percentuali, caricare 50 div s in esso. Quando si carica il prossimo div, verrà aggiunto solo il 2% all'altezza totale del documento, il che significa che la prossima richiesta verrà attivata non appena si scorre di questi 2% al 70% dell'altezza del documento. Nel mio esempio fisso, l'offset inferiore definito caricherà il nuovo contenuto solo quando l'utente si trova a un intervallo definito di pixel assoluti dalla parte inferiore dello schermo.

Answer 2

Una ricerca su google veloce per get percentage scrolled down porta su this page come primo risultato (con il codice seguente, che più o meno fa quello che vuoi). Mi sento come se non avessi tentato alcuna ricerca prima di chiedere qui.

$(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 

    } 

});