10

我有下面的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;
}
4

6 回答 6

2

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

$(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 并未位于底部。我希望你能解决这个问题。

希望这可以帮助。

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

于 2012-12-04T04:27:53.253 回答
2

我不确定您未接受的其他答案有什么问题，但这是我的：

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

​</p>

于 2012-12-11T17:56:28.110 回答
1

所有这些 jQuery slideUp/slideDown 的替代方法是使用 CSS 来处理它。

我们检测用户何时到达您的#showfootershop元素，然后从页脚添加或删除一个类：

$(window).scroll(function()
{

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

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

然后我们使用 CSS 来显示或隐藏页脚，具体取决于该类的存在：

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

正如您在上面看到的，当.show类位于页脚时，我们更改页脚元素的高度以显示它。然后使用 CSS 过渡来为这种变化设置动画。

这个方法的好处是它非常轻量级和高效（特别是如果你有很多 jQuery 动画同时工作），你可以轻松地为各种不同的变化设置动画，比如不透明度、文本和背景颜色等。根本不需要触摸你的 JS。

jsFiddle

这是你的 jsFiddle 修改 http://jsfiddle.net/DigitalBiscuits/8PUa9/29/

于 2012-12-09T02:20:08.603 回答
0

slideUp()也将隐藏元素和隐藏元素的偏移量，[0,0]因此隐藏的即时页脚distanceTop为负数。您可以将高度设置为零并获得相同的视觉结果，并且由于您没有隐藏页脚，因此它仍然具有相同的top偏移量

于 2012-12-04T04:56:10.853 回答
0

我建议在向上滚动和向下滚动代码之间放置一个小缓冲区。

我对您的代码进行了微调，以放入 100px 的缓冲区：

Javascript

$(window).scroll(function() {

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

    if ($(window).scrollTop() >= distanceTop) {
        $("#footershop").slideDown();
    }
    else if ($(window).scrollTop() < (distanceTop - 100)) {
        $("#footershop").slideUp();
    }
});

演示

于 2012-12-09T03:27:18.597 回答
0

尝试滚动到某个元素太麻烦了，只需使用页面底部即可。

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        $("#footershop").slideDown();
    }
    else {
        $("#footershop").slideUp();
    }
});​

jsfiddle

于 2012-12-13T03:13:15.613 回答