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

Question

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

这在桌面上工作得很好-当页面在顶部时，导航总是显示出来，但在移动设备上，当页面在页面顶部时，导航会出现故障并完全消失。

我如何修改它，使其在向下滚动第一个100px时可见，然后消失，直到用户向上滚动？

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>

​