Question

我必须根据滚动显示/隐藏图像。但这里的条件是，如果用户在页面顶部/底部附近上下滚动多次，则图像不应淡入并重复淡出。它应该在淡入之前听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();
}
});

Answer 1

您可以通过在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>

基于Javascript中的滚动显示/隐藏图像

1 个答案: