Need help in JQuery scroll function
I am developing a small project and i need a help in JQuery Scroll event. I wrote code loading data while scrolling using following code
$(window).scroll(function(){
if ($(window).scrollTop() > ($(document).height() - $(window).height())*.75){
$('#loadingimage').css({"bottom":"10px", "right":"10px"}).fadeIn('fast');
$.ajax
({
type: "POST开发者_如何学Python",
url: "../../scroll_load.php",
data: "letter="+letter+"&start="+start,
success: function(msg)
{
$('#new_music_videos .appendvideos').append(msg).children(':last').hide().fadeIn('slow');
$('#loadingimage').fadeOut('fast');
}
});
}
});
But data loading while the scroll bar is moving at bottom of the screen only. How can i make it for scroll upto 3/4 of the screen.
Thanks a Lot.
For the updated question:
var loading = false; //stores if we're loading, to prevent "over-loading", I'm hilarious
$(window).scroll(function(){
//if we're loading, or the scroll wasn't 3/4 of the way down, ignore the event
if (loading || $(window).scrollTop() < ($(document).height() - $(window).height())*.75) return;
loading = true; //loading! prevent scroll from loading until we're finished
$('#loadingimage').css({"bottom":"10px", "right":"10px"}).fadeIn('fast');
$.ajax({
type: "POST",
url: "../../scroll_load.php",
data: "letter="+letter+"&start="+start,
success: function(msg) {
loading = false; //done loading, a scroll can load more again
$('#new_music_videos .appendvideos').append(msg).children(':last').hide().fadeIn('slow');
$('#loadingimage').fadeOut('fast');
}
});
});
For previous question:
You can just check if it's over 3/4 of the way down, rather than equal to the total, like this:
$(window).scroll(function() {
if ($(window).scrollTop() > ($(document).height() - $(window).height())*.75) {
//rest of code
Note that with this, especially on longer pages, it'll now be true
many times before reaching the bottom, so you'll probably want to set a loading
boolean flag to prevent loading new content multiple times at once.
精彩评论