jQuery 滚动到页面底部时加载内容

Question

i need to do when i'm scrolling down of my page load more

<div class="container">
<div class="news">News 1</div>
<div class="news">News 2</div>
<div class="news">News 3</div>
<div class="news">News 4</div>
</div>

i have only html site, no PHP and MySQL, all news are i one page. for example when scroll to bottom for 500 px, load more content

Answer 1

I think that you would do it better with a Lazy Load plugin in Javacript.

But simpliest way to implement what you want is using Jquery following this steps:

1 - Calculating de Window Vertical size (on document ready)

var element = $(window).height();

2 - Calculating Scroll and counterweigh with the element page

$(window).scroll(function(){
  var y = $(window).scrollTop();
    if (y >= element){
      // Do stuff, like append more elements
    }
});

Answer 2

If you are seeking for lazy load this is a good step-by-step tutorial on how to get it on your website. I have done it on my website in no time.

Answer 3

The correct code for this is:

 $(document).ready(function(){ var element = $(document).height(); $(window).scroll(function(){ var y = parseInt($(window).scrollTop()) + parseInt($(window).height()); if (y >= element){ $("#loader_bars").show(); //Make post to server from last id recieved } }); });

Its bug free, I used all the time.....Also the lazyload the Mirakurun said is just for images