Question

我知道当用户滚动到特定点时如何运行代码，但是当用户滚动（无论在哪里或哪里）时，我找不到关于显示元素的问题，然后在用户停止滚动时隐藏它。有没有一种直接的方法来实现这个jQuery？

Answer 1

在元素上使用固定定位，并使用此事件：

$(window).scroll(function() {
  $(element).stop(true, true).show().fadeOut('fast');
});

这将在滚动时显示元素，然后在滚动停止时将其淡出。 stop()方法停止当前正在运行的动画。

Fiddle

Answer 2

jQuery没有事件＆＃34; scrollStop＆＃34;所以你可以使用setTimeout来做你的行动

<div>
    <div class="fade">
        Scroll down i will become invisible
    </div>
</div>

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
        $('.fade').show();

    $.data(this, 'scrollTimer', setTimeout(function() {
        // do something
        $('.fade').hide();
    }, 250));
});

http://jsfiddle.net/onqn2gjj/896/

Answer 3

我的建议是使用一个函数在立即滚动时显示元素，然后在一定时间后隐藏它。如果我们再次滚动，我们基本上会再次“推”计时器。这基本上是你可能听说过的去抖动的概念。因此，我的解决方案如下所示：

var hideTimeout = null;

var show = function() {
  $('#theone').show();
}

var hide = function() {
  $('#theone').hide();
}

$(document).ready(function(){

  $(window).scroll(function(e){
    if (hideTimeout) {
        window.clearTimeout(hideTimeout);
      hideTimeout = null;
    }
    show();

    window.setTimeout(hide, 500);
  });

});

https://jsfiddle.net/386bstgh/1/

在滚动期间显示元素，在滚动停止时隐藏它

3 个答案: