如何當向下滾動的jQuery

獲取瀏覽器的屏幕窗口的位置，這是一個腳本會從數據庫中查詢數據時，用戶滾動網站的底部，但我的箭頭酒吧等於瀏覽器的底部之前要查詢的數據。我想查詢數據或負載Ajax時用戶滾動至2/3或接近到達瀏覽器的瀏覽器如何當向下滾動的jQuery

$(document).ready(function() { 
    var lastScrollTop = 0; 

    document.addEventListener("scroll", function() { // or window.addEventListener("scroll".... 

     var st = window.pageYOffset || document.documentElement.scrollTop; 

     if (st > lastScrollTop) { 

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

       $.ajax({ 
        url:'products/scroll', 
        method:'get', 
        dataType:'html', 
        data:{}, 
        success : function (data, status) { 
         console.log(data); 
         $(data).appendTo('.load-more-block') 
        } 
       }) 
      } 
     } 

     lastScrollTop = st; 
    }, false); 
});

來源

2016-07-28 Heng Sopheak

的底部不是直到底部這應該工作。如果你想在「無限滾動」的效果，你必須重新設置triggerFlag，以及重新更新docHeight和triggerHeight值到任何新的文件的高度，只要是使用來自Ajax請求的新值的DOM更新。

$(document).ready(function(){ 
 
    var docHeight = $(document).height(); 
 
    var triggerHeight = docHeight*0.6667; 
 
    
 
    $("#docHeight").text(docHeight); //Ignore 
 
    $("#triggerHeight").text(triggerHeight); //Ignore 
 
    
 
    
 
    var triggerFlag = false; 
 
    
 
    $(window).scroll(function(){ 
 
    $("#height").text($(this).scrollTop()); //Ignore 
 
    if (!triggerFlag && $(this).scrollTop() > triggerHeight){ 
 
     //Execute code here 
 
     triggerFlag = true; 
 
     $("#status").text("Executed at " + new Date()); 
 
     
 
    } 
 
    }); 
 
});

html{ 
 
    height: 6000px; 
 
} 
 

 
p{ 
 
    position: fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <p> 
 
    Current Height: <span id='height'>0</span><br> 
 
    Window Height: <span id='docHeight'>0</span><br> 
 
    Trigger Height: <span id='triggerHeight'>0</span><br> 
 
    Status: <span id='status'>false</span> 
 
    </p> 
 
</body> 
 
</html>

來源

2016-07-28 18:28:45 NTL

爲什麼我們知道使用docHeight * 0.6667;？我們可以使用docHeight * 0.1667;或另一個值？ –

'0.6667'爲2/3。 – NTL

如何當向下滾動的jQuery

回答

相關問題