淡入/淡出，固定/固定标题

Question

好的，我知道我似乎已经问过这个问题了，@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）。

请帮忙！

Answer 1

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

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

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

Fiddle

但即便如此，您仍然会执行不必​​要的动画，所以我建议使用 .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);
    }
});

Fiddle

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