javascript - 页脚使用 .slideUp 向上滑动但随后向下滑动

Question

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

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

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:

<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

使用 slidingUp 和 slidingDown 两个函数，并在显示和隐藏 slider 后切换它们。

$(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，在隐藏时减少，这是正确的。这会导致产生不良行为的额外滚动事件。

<罢工> 检查这个 fiddle :我部分修复了这个问题。

<罢工> http://jsfiddle.net/BuddhiP/8PUa9/8/

检查此 JSBin 版本以获取固定版本:http://jsbin.com/axobow/2

我做的主要事情是 #footershop 现在是绝对定位的，所以它不会导致文档大小在显示或隐藏时发生变化，这在这种情况下很重要，就好像 document.height() 改变了它会影响你的计算。

尽管 fiddle 按预期工作，但 div 并未位于底部。我希望你能解决这个问题。

希望这对您有所帮助。

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