javascript - 使用jQuery水平滑动DIV

Question

在用户向下滚动 (x) 个像素后，我将一个 DIV 水平滑动到视口(viewport)中。如果他们向上滚动，它会再次滚动。然而，它的滑动方式似乎非常非常不稳定(有时也会停顿)。

<div id="doom_o"></div>

div#doom_o {
    position: fixed;
    left: -300px;
    z-index: -1;
    height: 400px;
    width: 309px;
    background-image: url("../images/doom_o.png");
    background-repeat: no-repeat;
}

$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        setTimeout(function() {
            $('#doom_o').stop().animate({left: "20%"});
        }, 250);
    } 
    else {
        setTimeout(function() {
            $('#doom_o').stop().animate({left: "-300px"});
        }, 250);
    }
});

Answer 1

您需要从 if 条件中删除 setTimeout 调用，然后将整个 block 放入它自己的 setTimeout 中。这意味着代码只在滚动完成时运行一次，而不是每次触发滚动事件时都会运行一次，而这正是导致卡顿的原因。

var timer;
$(window).scroll(function() {
    clearTimeout(timer);
    var timer = setTimeout(function() {
        if ($(this).scrollTop() > 100) {
            $('#doom_o').stop().animate({ left: "20%" });
        } 
        else {
            $('#doom_o').stop().animate({ left: "-300px" });
        }
    }, 150)
});

Example fiddle