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），然后再觸發“動畫”功能。