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

下面是jQuery.slideUp和.slideDown函数，当到达浏览器窗口底部的

#showfootershop

div时，

#footershop

div向上滑动，然后立即向下滑动

当

#showfootershop

位于浏览器窗口底部且在用户向上滚动浏览器窗口之前不会向下滑动时，如何使

#footershop

保持“向上”和可见

小提琴：

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：

---

使用两个功能滑动和向下滑动，并在显示滑块和交替隐藏滑块后切换它们

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

$（函数（）{
var slideUp=函数（）{
如果（$（窗口）.scrollTop（）+$（窗口）.height（）>=$（文档）.height（））{
log（'在底部！！'）；
//切换处理程序
$（“#footershop”）.slideDown（函数（）{
$（窗口）.off（'scroll'，slideUp）。on（'scroll'，slideDown）；
});
}
};
var slideDown=函数（）{
如果（$（窗口）.scrollTop（）+$（窗口）.height（）<$（文档）.height（））{
//切换处理程序
$（“#footershop”）.slideUp（函数（）{
$（窗口）.off（'scroll'，slideDown）.on（'scroll'，slideUp）；
});
}
};
$（窗口）.on（'scroll'，slideUp）；
});​

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

检查这把小提琴：我把它部分修好了

检查此JSBin版本是否为固定版本：

我所做的主要工作是#footershop现在已完全定位，因此在显示或隐藏时不会导致文档大小发生更改，这在本例中很重要，因为document.height（）的更改会影响您的计算

虽然小提琴的工作原理和预期的一样，但div并没有正确地定位在底部。我希望你能解决这个问题

希望这有帮助

---

注意：你需要用全高窗口测试小提琴，否则你不会看到页脚滑动，因为它显示了文本中间的某个地方。

<代码> SLUDUP（）/代码>也会隐藏隐藏元素的元素和偏移量：<代码> [0，0] >所以即时页脚是隐藏的<代码> DistaCotoP是否定的。您可以将高度设置为零并获得相同的视觉效果，因为您没有隐藏页脚，因此页脚仍将具有相同的

top

offset

此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

JSFIDLE 这是您修改的JSFIDLE

---

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

我对您的代码做了一点小小的调整，将其放入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();
    }
});

$（窗口）。滚动（函数（）{
var distanceTop=$（'#showfootershop'）.offset（）.top-$（window.height（）；
if（$（窗口）.scrollTop（）>=distanceTop）{
$（“#footershop”）.slideDown（）；
}
else if（$（窗口）.scrollTop（）<（distanceTop-100））{
$（“#footershop”）.slideUp（）；
}
});

---

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

JS:

CSS:

---

​

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

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

---

如果希望页脚div保留在底部，请考虑使用<代码>位置<代码>。隐藏元素的偏移量是<> > [0，0] 。因此，即时页码是隐藏的<代码> dStistaToop是否定的，越来越近。但是在我的测试站点上，页脚出现在窗口的中间，而不是一致。这比我想象的要难！是的，我的小提琴也一样。但并没有试图解决它，因为我认为这是一个造型的问题。我会再看一看。@songdogtech，我制作了一个JSBin，可以正常工作，请检查一下，看看这是否是您想要的。谢谢！这比BuddhiP的代码更优雅，我会使用它，但我必须把赏金给他/她，他们早就给出了答案。干杯，马克我很高兴你发现这个方法很有用。可惜你选择了另一个答案作为正确答案。与其说是因为赏金，还不如说是因为如果其他人来这里为他们自己的问题寻找解决方案，他们将错过这个答案，而使用BuddhiP的解决方案……不幸的是，它仍然存在缺陷。这很好；直到现在，我才在这些答案上签回。必须悬赏给最早的答案。

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

#footershop {
    height:0px;
    width:100%;
    z-index: 2;
    background:#00ffff;
    position: absolute;
    bottom:0;
    left:0;
    overflow:hidden;
}
body {
    position:relative;   
}

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