How to get the position of screen window of browser when scroll down jquery
Question
This is script will query data from Database when user scroll to bottom of website But I want query data before the arrow bar equal to bottom of browser. I want to query data or load ajax when user scroll till 2/3 or near arrive the bottom of browser not till bottom of browser
$(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);
});
1 answers
solution1
1 ACCPTED 2016-07-28 18:28:45
This should work. If you want the "infinite scroll" effect, you'll have to reset the triggerFlag , as well as re-update docHeight and triggerHeight values to whatever the new document height is whenever your DOM updates with the new values from the ajax request.
$(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.