Question

我想在窗口滚动到底部滑动一个div。当文件达到800（底部）Div应该向右滚动0而小于800它应该滑动并隐藏。

问题是当滚动到底部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() fixes the issue。

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

另外，如果你不想让人们搞砸它，我还建议你在触发“animate”功能之前在你的动画元素上使用.stop（true，true）。

jQuery动画窗口滚动

2 个答案: