CODEWITHSUNDEEP
javascriptjquery
user1542984
user1542984

Reputation:

How to show two div when user scroll down using jquery?

Can anyone please tell me how to show two divs when the user scroll down using jquery.I want to push values on the array .Is it possible to add a div on the bottom.As we add when user scroll to top ?

http://jsfiddle.net/Gbd3z/2/

$("#fullContainer").scroll(function () {
    // top
    if ($(this).scrollTop() === 0 && pages.length) {
        console.log("up"+pages);
        var stringLoad = "page_" + pages.length;
        $("<div id='" + stringLoad + "'>" + pages.pop() + "</div>").prependTo($("#fullContainer"));
        $('#fullContainer').children().slice(3).remove()
    }
    if ($(this).scrollTop() >= $(this)[0].scrollHeight - document.body.offsetHeight) {
        console.log("down");
    }
});

Upvotes: 2

Views: 138

Answers (1)

Luke
Luke

Reputation: 20070

I'm not entirely sure what you're asking for, but does this do it?

http://jsfiddle.net/luken/R24TH/

var pages = [page_1, page_2, page_3, page_4,page_5];
var lastLoadedPageIndex = -1;
var $container = $('#fullContainer');
addNextPageToContainer();

function addNextPageToContainer () {
    lastLoadedPageIndex++;
    if (lastLoadedPageIndex < pages.length) {
       $( '<div id="page_'
                  + lastLoadedPageIndex
                  + '" class="page">' 
                  + pages[lastLoadedPageIndex]
                  + '</div>'
       ).slideDown().appendTo( $container );
   }
}

$container.scroll(function(){
    if ($container.scrollTop() === 0 && pages.length) {
        console.log("up");
    } else if ($container.scrollTop() >= $container[0].scrollHeight - document.body.offsetHeight) {
        console.log("down");
        addNextPageToContainer();
    }
 });

Upvotes: 1

Related Questions