javascript - 在滚动条上隐藏绝对 div

Question

我有一个 div 和 position: absolute; 它在屏幕的右上角。

.selectState {
  position: absolute;
  top: 96px;
  right: 0;
  font-size: 12px;
  background-color: #f1f1f1;
  color: #428bca;
}

当用户向下滚动时，我想隐藏这个 div。如何使用 javascript 或 CSS 做到这一点？

Answer 1

这是一个非 jQuery 跨浏览器的解决方案:

window.addEventListener('scroll', function () {
  var scrollAmount = window.scrollY || document.documentElement.scrollTop;
  if (scrollAmount > 0)
    document.querySelector('your-element').style.display = 'none';
  else
    document.querySelector('your-element').style.display = 'block';
});

这适用于 IE8+。如果您希望在用户已经滚动一点时隐藏 div，只需将数字 0 更改为您想要隐藏它的位置即可。