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

Question

I currently have a navbar that on scroll down disappears and on scroll up reappears again (and is always visible when at the top of the page).

This works fine on desktop - the nav always shows when the page is at the top, but on mobile devices glitches and disappears completely when at the top of the page.

How would I amend this to be visible on scroll down for the first 100px, then disappear until user scrolls up?

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

Solution

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

You can style element for scrolled and non-scrolled page. See the simple solution below:

 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>