Question

i want that when user scroll down to absolute bottom then a div should come out from right side and when user click on close button then it slide in to right. i got a sample code which is very such similar but i want that when reach bottom then div should come out. so here i am giving code and just tell me what to change.

<p id="last">
Some paragraph text
</p>

<div id="slidebox">
<a class="close"></a>
<p>More in Technology & Science (4 of 23 articles)</p>
<h2>The Social Impact of Scientific Research and new Technologies</h2>
<a class="more">Read More »</a>
</div>

$(function() {
$(window).scroll(function(){
    var distanceTop = $('#last').offset().top - $(window).height();

    if  ($(window).scrollTop() > distanceTop)
        $('#slidebox').animate({'right':'0px'},300);
    else
        $('#slidebox').stop(true).animate({'right':'-430px'},100);
});

$('#slidebox .close').bind('click',function(){
    $(this).parent().remove();
});
});

i think this line if ($(window).scrollTop() > distanceTop) need to be changed to determine that user reach bottom most of the page.

full source code and demo url is
http://tympanus.net/codrops/2010/04/13/end-of-page-slide-out-box/

http://tympanus.net/Tutorials/EndPageSlideOutBox/

thanks

Answer 1

Not quite sure what part to play that .last has, but if you want to show the container when the user reaches the bottom of the web page, you can use something like this:

if($(window).scrollTop() == ($('body').height() - $(window).height()))
    $('#slidebox').animate({'right':'0px'},300);
else
    $('#slidebox').stop(true).animate({'right':'-430px'},100);

See a demo as the following jsFiddle.