Question

I’ve got the jQuery .slideUp and .slideDown function below, and when reaching the #showfootershop div at the bottom of the browser window, the #footershop div slides up and then immediately slidesdown.

How can I get the #footershop to remain “up” and visible when #showfootershop is at the bottom of the browser window and not slide down until the user scrolls the browser window up?

Fiddle: http://jsfiddle.net/8PUa9/1/

jQuery:

$(window).scroll(function(){
/* when reaching the element with id "showfootershop" we want to
show the slidebox. */

    var distanceTop = $('#showfootershop').offset().top - $(window).height();

    if  ($(window).scrollTop() > distanceTop)
        $("#footershop").slideUp();
    else
        $("#footershop").slideDown();

});

html in footer:

<div id="showfootershop"></div>
<div id="footershop">
    <h1>Shop Links</h1>
</div>
</body>
</html>

CSS:

#footershop {
   height:35px;
   width:100%;
   display: none;
   z-index: 2;
}

Answer 1

Use two functions for slidingUp and slidingDown, and toggle them once you have shown the slider and hidden it alternatively.

$(function() {

    var slideUp = function() {
        if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
            console.log('At bottom!!');
            //toggle the handlers
            $("#footershop").slideDown(function() {
                $(window).off('scroll', slideUp).on('scroll', slideDown);
            });
        }
    };

    var slideDown = function() {
        if ($(window).scrollTop() + $(window).height() < $(document).height()) {
            //toggle the handlers
            $("#footershop").slideUp(function() {
                $(window).off('scroll', slideDown).on('scroll', slideUp);
            });
        }
    };


    $(window).on('scroll', slideUp);
});​

EDIT: I think the main problem you have is #footershop increases document.height when it shows and reduces when hidden, which is correct. This causes additional scroll events which creates the undesired behaviour.

Check this fiddle: I fixed this partially.

http://jsfiddle.net/BuddhiP/8PUa9/8/

Check this JSBin version for fixed version: http://jsbin.com/axobow/2

Main thing I did was #footershop is now absolutely positioned, so it doesn’t cause the document size to change when shown or hidden, which is important in this case as if document.height() changed it affects you calculation.

Although fiddle works as expected, div is not positioned right on bottom. I hope you can fix that.

Hope this helps.

NOTE: You need to test the fiddle with full-height window, otherwise you will not see the footer sliding up since it shows somewhere in the middle of text.