jQuery load content when scroll to bottom of page

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

I don't think you should ask this question when no effort is seen by us. We don't help lazy guys. — , Aug 25 '16 at 09:49
What you are looking for is lazy load. Google jquery lazy load. sure you will find a plugin — Andrew, Aug 25 '16 at 09:52
i find this but i need that it work for my class container and not not for
http://stackoverflow.com/questions/13237555/jquery-load-content-when-scroll-to-bottom-100px-of-page-multiple-events-fired — go01go01go, Aug 25 '16 at 09:54

score 1 · Answer 1 · answered Aug 25 '16 at 10:29

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
    }
});

score 0 · Answer 2 · answered Aug 25 '16 at 09:57

0

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.

answered Aug 25 '16 at 09:57

Mirakurun

4,859
5
16
32

score 0 · Answer 3 · answered Feb 07 '22 at 18:33

0

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

answered Feb 07 '22 at 18:33

Alberto García Gómez

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 07 '22 at 18:46

jQuery load content when scroll to bottom of page

3 Answers3