Question

我想在停止滚动时显示顶部div并在用户滚动时隐藏它。我有相反的代码，有人可以解决它如何反转它，以便div显示停止滚动和隐藏当用户滚动。

＆＃13;

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

＆＃13;

top {
  position: fixed;
  background: #000;
  color: #eee;
  right: 0;
  top: 0;
  padding: 10px;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<top>Show me on scroll</top>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

＆＃13;

Answer 1

试试这个：

 $(window).scroll(function() {
      $('top').stop(true, true).hide().fadeIn('fast');
    });

和css：

top {
  position: fixed;
  background: #000;
  color: #eee;
  right: 0;
  top: 0;
  padding: 10px;
  display: block;
}

fiddle

Answer 2

使用下划线的去抖功能，或者编写自己的去抖功能。试试这个现场演示。很简单，IMO提供最佳用户体验：

var $hideMe = $('#imHiddenDuringScroll')

var hideIt = _ => {
  $hideMe.fadeOut('fast')
  showItLazy()
}
var showItLazy = _.debounce(_ => {
  $hideMe.fadeIn('fast')
}, 350)

$(window).scroll(hideIt)

#imHiddenDuringScroll {
  position: fixed;
  background: #000;
  color: #eee;
  right: 0;
  top: 0;
  padding: 10px;
}
#longScrollableText {
  width: 270px;
}

<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/underscore@1.8.3/underscore-min.js"></script>

<div id="imHiddenDuringScroll">I am hidden during scroll</div>
<div id="longScrollableText">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit met, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in rehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia        deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur dipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim eniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo onsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, unt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

在滚动上隐藏div，在停止时显示div

2 个答案: