在特定点后向下滚动时隐藏 Header？

Question

我有这个代码，从https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp

开始使用

我想知道是否可以对此进行修改，以便 header 仅在距页面顶部 120 像素的特定高度后才在滚动时消失。这是我目前拥有的代码：

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

#navbar {
  background-color: #333; /* Black background color */
  position: fixed; /* Make it stick/fixed */
  top: 0; /* Stay on top */
  width: 100%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

/* Style the navbar links */
#navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

section {
background-color: grey;
margin-top: 50px;
}

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

<section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan tincidunt massa in tristique. Vestibulum mattis erat sed porttitor cursus. Praesent dignissim, sem vel tincidunt venenatis, dolor orci sollicitudin ipsum, et vestibulum mauris ex non felis. Cras pulvinar lectus eu risus lobortis malesuada. Sed accumsan metus quis ante scelerisque molestie. Maecenas molestie arcu in massa egestas tempus. Vestibulum augue purus, tincidunt ut porta quis, pulvinar imperdiet neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque id convallis odio.

Sed fringilla rutrum nulla. Nam diam ex, gravida at nisl vel, feugiat vehicula ex. Duis et ligula vitae velit pretium finibus quis sit amet diam. Sed ac interdum magna, a pharetra ante. Quisque vestibulum luctus ligula, elementum aliquam sem molestie non. Maecenas auctor magna a magna hendrerit, ornare facilisis tortor finibus. Nulla eu augue leo. Donec euismod scelerisque porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula sit amet nisi eu porttitor. Donec dictum quis erat ut tincidunt. Curabitur pharetra iaculis purus. In hac habitasse platea dictumst. Aenean egestas laoreet lorem, ac eleifend magna.

Sed quis feugiat diam. Nunc euismod dapibus mauris quis egestas. Nam venenatis magna sit amet lorem semper, eget sagittis dolor malesuada. Sed fringilla pulvinar maximus. In venenatis ligula magna, id pulvinar magna auctor condimentum. Aliquam dictum erat sit amet elit tristique feugiat. Curabitur feugiat nunc ultricies sapien finibus condimentum. Duis gravida, ipsum sit amet luctus vulputate, odio quam ornare sapien, non aliquam enim metus eget dolor. Duis nisl lorem, tempor non cursus nec, lobortis vel nibh. Suspendisse consectetur sed nisl in vestibulum. Nunc at placerat ante. Donec ante massa, mollis vel ultricies sed, ullamcorper at risus. Morbi euismod laoreet sagittis.</section>

目前，header 会在您开始向下滚动时立即消失，但我希望它保持可见，直到您滚动超过 header 的高度。

希望这是有道理的。

Answer 1

你可以只检查滚动位置大于120的时候让它消失，小于120的时候恢复原状

  window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (currentScrollPos > 120) {
      document.getElementById("navbar").style.top = "-50px";
    } else {
      document.getElementById("navbar").style.top = "0px";

    }
  }

在特定点后向下滚动时隐藏 Header？

Hide Header on Scroll Down After a Certain Point?

html

javascript

css

jquery

header