jQuery在窗口滚动上设置动画

Question

我想在窗口滚动到底部滑动一个div。 当文档到达800（底部）Div时，应向右滚动0，然后向右滚动800，然后滑动并隐藏。

问题是滚动到底部div时滑动并显示，但是滚动到顶部div时它又不会滑动并隐藏。

这是我的代码

$(document).scroll(function () { // remove "$"
    var s = $("#slidebox");
    var y = $(this).scrollTop();        
    if (y > 800) {
        s.animate({"right":"-450px"}, "slow");
    } else if (y < 800) {

        s.animate({"right":"0px"}, "slow");
    }
});

基本上我想要的是在文档滚动到底部时隐藏和显示（具有滑动效果）div。

检查jsfiddle下面的滚动。

的jsfiddle

Answer 1

一方面，user390 ....的响应是正确的，因为高度计算不正确。

另一方面，动画的工作方式是使它们依次排队，因此有时div直到完成所有其他操作之后才滑入/滑出。 使用.stop() 可解决问题 。

var s = $("#slidebox");

$(document).scroll(function () { // remove "$"
    var y = $(this).scrollTop() + $(window).height();        
    console.log(y);
    if (y > 800) {
        s.stop().animate({"right":"-450px"}, "slow");
    } else {
        s.stop().animate({"right":"0px"}, "slow");
    }
});

Answer 2

您的问题是，如果陈述错误，您正在使用“我是否触底”的值。

这是您应该使用的计算值：

$(document).scroll(function () { // remove "$"
    var s = $("#slidebox");
    var y = $(this).scrollTop();
    var bottom = jQuery(document).height() - jQuery(window).height();
    if (y >= bottom) {
        s.animate({"right":"-450px"}, "slow");
    } else {
        s.animate({"right":"0px"}, "slow");
    }
});

另外，如果您不希望别人弄乱它，我还建议您在动画元素上使用.stop（true，true），然后再触发“动画”功能。