carga ajax cuando desplazamiento alcanza el 80%

Question

estoy usando el siguiente código que está trabajando cuando la barra de desplazamiento alcanza el botttom,

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

como quiera que el Ajax se dispara cuando alcancé el 70% del desplazamiento no 100.

Answer 1

siempre y cuando su cheque actual está disparando cuando desplazado hasta la parte inferior de la página, puede intentar algunos aritméticas básicas:

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

Asegúrese de añadir una comprobación para no disparar múltiples peticiones Ajax simultáneas, si aún no lo hiciste

esto se sale del alcance de la pregunta, pero si quieres un ejemplo de cómo prevenir múltiples peticiones de ser despedido de forma simultánea:

declarar una var global, por ejemplo, processing.

Entonces incorporarlo en su función:

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

Eso es un ejemplo sencillo de usar un var para realizar un seguimiento si hay una petición Ajax activo para su función de desplazamiento o no, y que no interfiera con cualquier otra solicitud concurrente de Ajax que pueda tener.

Editar: JSFiddle example

Tenga en cuenta que el uso de un% para medir la altura del documento podría ser una mala idea, teniendo en cuenta que la altura del documento aumentará cada vez que cargue algo, por lo que es desencadenar la petición Ajax siendo relativamente más lejos de la parte inferior de la página (tamaño absoluto)

le recomiendo usar un valor fijo de compensación para evitar que (200-700 o así):

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

Ejemplo: JSFiddle

Editar: para reproducir el problema en el primer código con porcentajes, cargue 50 div s en él. Cuando carga el siguiente div, agregará solo un 2% a la altura total del documento, lo que significa que la siguiente solicitud se activará tan pronto como vuelva a desplazar estos 2% al 70% de la altura del documento. En mi ejemplo fijo, el desplazamiento inferior definido cargará contenido nuevo solo cuando el usuario se encuentre en un rango definido de píxeles absolutos desde la parte inferior de la pantalla.

Answer 2

Una búsqueda rápida en Google para get percentage scrolled down muestra this page como el primer resultado (con el siguiente código, que hace más o menos lo que usted desea). Siento que no has intentado ninguna investigación antes de preguntar aquí.

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

    } 

});