1

好的，我知道我似乎已经问过这个问题了，@adeneo 之前已经回答并赞赏了这个问题，但是我脑子里嗡嗡作响，因为我无法让它发挥作用。

我试图在向下滚动时使我的“固定”定位标题“fadeTo”0.5 不透明度，并在用户滚动回顶部时淡入完全不透明（“不透明度”：1.0）？

这是我所拥有的：

$(window).on('scroll', function() {
if ($(this).scrollTop() > 50) {
$("#header").fadeTo(400, 1);
}else{
$("#header").fadeTo(400, 0.5);

}
});

目前，使用此代码似乎仅在向下滚动时使其“fadeTo”0.5 不透明度，但当滚动回顶部时，它不会淡化回完全不透明（不透明度：1.0）。

请帮忙！

4

1 回答 1

3

问题之一是每次用户滚动页面时您都在执行 400 毫秒的动画，这会生成一个非常长的效果队列，这些效果没有可见效果，例如1每次scroll事件触发时动画到不透明度scrollTop > 50，添加一个很长的不可见效果队列，直到出现淡出效果。

一种简单的补救方法是.stop(true)在执行之前使用fadeTo，这样元素效果队列将始终在执行给定动画之前被清除。

$(window).on('scroll', function() {
    if ($(this).scrollTop() > 50) {
        $("#header").stop(true).fadeTo(400, 0.5);
    } else {
        $("#header").stop(true).fadeTo(400, 1);
    }
});

小提琴

但即便如此，您仍然会不必要地执行动画，所以我建议使用.data来存储淡入淡出的状态并仅在必要时进行动画处理：

$(window).on('scroll', function() {
    var header = $("#header");
    if ($(this).scrollTop() > 50) {
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(400, 0.5);
    } else if (header.data('faded')) {
        header.data('faded', 0).stop(true).fadeTo(400, 1);
    }
});

小提琴

附言。我已经反转了您的不透明度值，因为您的问题代码的逻辑与您想要的行为不符。

于 2012-11-07T20:45:04.827 回答