的jsfiddle

Question

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

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

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，并在显示滑块并将其隐藏后交替显示它们。

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

希望这有帮助。

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

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

Answer 3

所有这个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/

Answer 4

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

Answer 5

我建议在你的向上滚动和向下滚动代码之间加一点缓冲区。

我对你的代码稍作调整，放入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();
    }
});

<强> Demo

Answer 6

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

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

jsfiddle

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

6 个答案:

的jsfiddle