如何修改此导航栏以仅在 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;
};

Answer 2

您可以为滚动和非滚动页面的元素设置样式。请参阅下面的简单解决方案：

function update() {
  window.document.body.setAttribute('data-scrolled', window.pageYOffset > 100 ? 'Y' : 'N');
}

window.onscroll = update;
window.onresize = update;
update();

body {
  height: 4000px;
}

#test { 
  position: fixed;
}

body[data-scrolled="N"] #test { 
  color: blue;
}  

body[data-scrolled="Y"] #test { 
  color: red;
}

<div id="test">Please scroll the page</div>

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

How to modify this navbar to hide on scroll down only after 100px?

javascript

css

scroll

offset

navbar