我必须基于滚动显示/隐藏图像。但是这里的条件是，如果用户在页面顶部/底部附近多次上下滚动，则图像不应反复淡入和淡出。在淡入之前，它应该收听1秒钟。以下是我尝试的逻辑。
码
<div class="a" style="height: 300px;width: 300px;background-color: green;position:fixed;">
</div>
var $toTop = $('div.a');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$toTop.fadeIn();
} else if ($toTop.is(':visible')) {
$toTop.fadeOut();
}
});
最佳答案
您可以通过将超时保存在jquery主数据对象中来实现，只要触发滚动事件，该超时就会等待一秒钟。该事件还将清除所有先前注册的超时：
var $toTop = $('div.a');
$(window).scroll(function() {
clearTimeout($.data(this, 'waitASecond'));
$toTop.stop();
$.data(this, 'waitASecond', setTimeout(function() {
if ($(window).scrollTop() > 100) {
$toTop.fadeIn();
} else if ($toTop.is(':visible')) {
$toTop.fadeOut();
}
}, 1000));
});body
{
height:1000px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
Scroll Down and wait....
<div class="a" style="height: 700px;width: 300px;background-color: green;display:none"></div>
</body>