JQuery onScroll animation

Question

我有一个onScroll动画，当用户滚动时，它会使我的标题文本褪色为.8的不透明度：

let header = $('header');
$(document).on('scroll',function(){
header.fadeTo(600,.8);
});

我希望当用户停止滚动时，不透明度逐渐变回1，但我不知道如何做到这一点。

有没有一种方法可以设置一个函数，当用户滚动时返回布尔值？

谢谢你的帮助！

Answer 1

我不确定这会有多大帮助，因为我还没有测试过它(如果你能在这里提供一个jfiddle甚至一个工作示例的话(。但从我的想法来看，你可能会使用fadeTo的回调，所以代码应该是这样的：

header.fadeTo(600,.8, function(){
// here bring back opacity to 1
});

希望这能有所帮助！

$('body').on('click', '#test', function(){
$('#test').fadeTo(600,.1, function(){
$('#test').fadeTo(100, 1);
});
});

#test{
background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">hello</div>

这是我刚才构建的一个快速的基本示例，因为我现在没有时间深入研究。因此，当你运行它时，如果你点击黄色的div，它会褪色到你需要的地方，一旦完成，它就会恢复到原始的不透明度。希望这个例子能对你有所帮助。我想它会和卷轴等类似。谢谢！

Answer 2

我已经使用以下代码完成了我想要的操作：

let header = $('header')
$( window ).scroll(function() {
header.css('opacity','.8');
clearTimeout( $.data( this, "scrollCheck" ) );
$.data( this, "scrollCheck", setTimeout(function() {
header.css('opacity','1');
}, 250) );
});

基于此链接中的一些代码：检查用户是否停止

感谢@N。伊万诺夫的提示！