jquery - 淡入/淡出，固定/粘性标题

Question

好吧，我知道我好像已经问过这个问题了，@adeneo 之前已经回答过这个问题并对此表示赞赏，但是我正在绞尽脑汁，因为我就是无法让它发挥作用。

我试图在向下滚动时使我的“固定”定位标题“fadeTo”不透明度为 0.5，并在用户滚动回顶部时淡入完全不透明(“opacity”: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 毫秒的动画，这会生成非常长的效果队列，这些效果没有可见效果，例如每次以 scrollTop > 50 触发 scroll 事件时，将不透明度设置为 1 不透明度，添加一个很长的不可见效果队列，直到淡出效果发生。

一种简单的补救方法是使用 .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);
    }
});

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。我已经反转了您的不透明度值，因为您问题的代码逻辑与您期望的行为不符。