javascript - 如何修改此导航栏以仅在 100px 后向下滚动时隐藏？

Question

我目前有一个导航栏，向下滚动时会消失，向上滚动时会再次出现(并且在页面顶部时始终可见)。

这在桌面设备上运行良好 - 导航始终在页面位于顶部时显示，但在移动设备上出现故障并在页面顶部完全消失。

我如何将其修改为在向下滚动前 100 像素时可见，然后消失直到用户向上滚动？

var prevScrollpos = window.pageYOffset;
window.onscroll = function () {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById('mainNav').style.top = '0';
  } else {
    document.getElementById('mainNav').style.top = '-100px';
  }
  prevScrollpos = currentScrollPos;
};

Answer 1

解决方案

var prevScrollpos = window.pageYOffset;
window.onscroll = function () {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos || currentScrollPos <= 100) {
     document.getElementById('mainNav').style.top = '0';
  } else {
     document.getElementById('mainNav').style.top = '-100px';
   }
  prevScrollpos = currentScrollPos;
};