开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜