Footer slides up with .slideUp but then slides down

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.

Answer 2

I'm not sure what's wrong with the other answers that you haven't accepted, but here's mine:

JSFiddle

JS:

$(window).scroll(function() {

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

    if ($(window).scrollTop() >= distanceTop - 20) {
        $("#footershop").animate({
            'height': '35px'
        }, 'fast');
    }
    else {
        $("#footershop").animate({
            'height': '0px'
        }, 'fast');
    }
});​

CSS:

#footershop {
    height:0px;
    width:100%;
    z-index: 2;
    background:#00ffff;
    position: absolute;
    bottom:0;
    left:0;
    overflow:hidden;
}
body {
    position:relative;   
}

​

Answer 3

An alternative to all of this jQuery slideUp/slideDown is to use CSS to handle it.

We detect when the user has reached your #showfootershop element and then add or remove a class from the footer:

$(window).scroll(function()
{

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

    if($(document).scrollTop() >= distanceTop)
         $('#footershop').addClass("show");
    else
         $('#footershop').removeClass("show");
}

Then we use CSS to display the footer or hide it depending on the presence of that class:

#footershop 
{
    position: fixed;
    height: 0px;
    z-index:999;
    bottom: 0;
    overflow:none;
    
   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   transition:all 0.5s ease-in-out;
   -webkit-transition:all 0.5s ease-in-out;
}
#footershop.show
{
    height:35px;
    
   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   transition:all 0.5s ease-in-out;
   -webkit-transition:all 0.5s ease-in-out;
}

As you can see above when the .show class is on the footer we change the height of the footer element to display it. CSS transitions are then used to animate this change.

The nice thing about this method is it's very lightweight and efficient (especially if you've got a lot of jQuery animations working at the same time), and you can easily animate various different changes like the opacity, text and background colours, etc. without needing to touch your JS at all.

jsFiddle

Here's your jsFiddle modified http://jsfiddle.net/DigitalBiscuits/8PUa9/29/