页脚用.slideUp向上滑动,然后向下滑动

Question

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

如何在浏览器窗口底部#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;
}

Answer 1

使用两个函数用于向上滑动和向下滑动，并在显示或隐藏滑块后切换它们。

\n\n

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

\n\n

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

\n\n

\n检查这个小提琴：我部分修复了这个问题。

\n\n

http://jsfiddle.net/BuddhiP/8PUa9/8/\n​

\n\n

检查此 JSBin 版本的固定版本：http://jsbin.com/axobow/2

\n\n

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

\n\n

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

\n\n

希望这可以帮助。

\n\n

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

\n