Extending a site when scrolling down?

Question

Does anyone have a suggestion on how to extend a site automatically?

For example the site "9gag.com" also known as 9fag. It loads a part into the browser, but as you scroll, the site extends itself, without the need to click on "the next site".

I woule like to use this in on a shop I created.

For example here:

http://saasil.de/wohnraumleuchten/deckenleuchten/

When you scroll down, you see that you can choose to go to the 2nd site...

It would be great if someone could just point me to the correct technology to use here.

Simply append new content to the page when the user scrolls past a certain point or is near the bottom. You can do that with jQuery. — Sébastien, Oct 12 '13 at 13:24
The content is generated automatically. That is why I am searching for a tutorial on the technology behind it. — bjanka muhametaj, Oct 12 '13 at 13:26

score 1 · Answer 1 · edited May 23 '17 at 10:25

Have a look at this question on SO. In this example, the page will extend 100px before reaching the bottom of the page

function loadMore()
{
    console.log("More loaded");
    // load your content (e.g. via ajax)
    $("body").append("<div>");
    $(window).bind('scroll', bindScroll);
}

function bindScroll()
{
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) 
    {
        $(window).unbind('scroll');
        loadMore();
    }
}

$(window).scroll(bindScroll);

thanks to JoeFletch!

score 1 · Accepted Answer · answered Oct 12 '13 at 13:40

As someone mentioned above in comments, you are searching for infinite-scroll. There is plenty of jQuery plugins which can help you achieve desired effect. Of, course if you are loading content dinamicaly, you can fetch your data with AJAX.

Similar technology is used at Twitter, Pinterest, etc, and of course on 9gag. You can see explanation and working demo at http://www.fieg.nl/infinite-ajax-scroll-a-jquery-plugin

Extending a site when scrolling down?

2 Answers2