Question

好吧，我知道好像我已经问过这个问题了，@ redneo之前已经回答过这个问题，但是我正在喋喋不休，因为我无法让这个问题起作用。

当我向下滚动并向用户滚动回到顶部时，我正在尝试将我的'固定'定位标题'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毫秒的动画，这会生成很长的效果队列，这些效果没有明显效果，例如：每次1事件触发scroll时动画为scrollTop > 50不透明度，添加一个非常长的隐身效果队列，直到淡出效果发生。

一种简单的方法是在执行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。我已经颠倒了你的不透明度值，因为你的问题代码的逻辑与你想要的行为不符。

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

1 个答案: