0

当滚动过去时，我正在使用 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 淡出，变得粘稠，然后淡入。

它触发正常，但它只是不断闪烁进出。一遍又一遍地切换淡入淡出。

有人可以给我一个关于如何实现我的预期行为的提示吗？我只想让它在滚动过去后注册，而它似乎一直在听滚动位置。

谢谢你。

4

1 回答 1

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()

这是一个演示

于 2013-06-15T22:06:09.030 回答