javascript - 页脚通过.slideUp向上滑动，然后向下滑动

我下面有jQuery .slideUp和.slideDown函数，当到达浏览器窗口底部的#showfootershop div时，#footershop div会向上滑动，然后立即向下滑动。

当#footershop位于浏览器窗口的底部并且在用户向上滚动浏览器窗口之前不向下滑动时，如何使#showfootershop保持“向上”并可见？

小提琴: 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:

<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;
}

最佳答案

对slideUp和slideDownDown使用两个函数，并在显示了滑块并交替隐藏后对其进行切换。

$(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);
});​

编辑:我认为您的主要问题是#footershop在显示时增加document.height，在隐藏时减少，这是正确的。这会导致其他滚动事件，从而产生不良行为。

检查这个小提琴:我已经部分修复了。

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

检查此JSBin版本是否为固定版本:http://jsbin.com/axobow/2

我做的主要事情是#footershop现在已绝对定位，因此在显示或隐藏时不会导致文档大小发生变化，这在这种情况下很重要，因为document.height()更改会影响您的计算。

尽管小提琴可以按预期工作，但div不在右下方。希望您能解决该问题。

希望这可以帮助。

注意:您需要使用全高窗口测试小提琴，否则您将看不到页脚向上滑动，因为页脚显示在文本中间。