Question

我正在使用jQuery在滚动过去时使标题div粘贴（位置：固定）。

这是我使用的代码，效果很好：

    $(window).scroll(function() {
    var y = $(this).scrollTop();

    if (y >= 200) {
        $('.top').addClass('sticky');
    } else {
        $('.top').removeClass('sticky');
    }
});

然而，我发现UX有点缺乏。我开始玩jQuery UI - 我在网站的其他地方使用它，所以它已经包含在内 - 这就是我遇到问题的地方：

$(window).scroll(function() {
    var y = $(this).scrollTop();

    if (y >= 200) {
        $('.top').toggle('fade', 200, function() {
            $('.top').addClass('sticky', function() {
                $('.top').toggle('fade', 200);
            });
        });
    } else {
        $('.top').removeClass('sticky');
    }
});

我想要的行为是div淡出，变粘，然后淡入。

它触发正常，但它一直闪烁进出。一遍又一遍地褪色。

有人可以告诉我如何实现我的预期行为吗？我只是希望它在滚动过去后注册，而看起来它一直在听滚动位置。

谢谢。

Answer 1

我认为正在发生的事情是动画已排队并保持切换状态，因为它会在您滚动时不断触发。最终，动画将停止，持续时间由滚动的距离决定。

所以你需要打断动画。

var y = $(this).scrollTop();

if (y >= 200) {        
    $('.top')
        .stop(true, true)
        .fadeOut(200).delay(200)
        .fadeIn(200).addClass('sticky');
} else {
    $('.top').removeClass('sticky');
}

jQuery .stop()

这是demo

jQuery scrollTop保持触发功能

1 个答案: