Question

我有一个似乎无法解决的简单javascript问题。

我想制作一个在向下滚动时隐藏并在向上滚动时显示的标头，但是不希望使用一个简单的触发器（在阈值上从0变为100），而是希望将其绑定到滚动。示例：http://oma.eu/

有什么想法吗？

Answer 1

您可以使用Headroom.js轻松做到这一点：https://wicky.nillia.ms/headroom.js/

Answer 2

如果不检查窗口的 pageYOffset ，就不能使用纯JavaScript来做到这一点，w3schools网站上有一个简单的示例，请参见此处的演示： How To Hide Navbar on Scroll Down

已更新：

以下是更新的修复程序的演示（使用css转换translateY设置标题的位置）： Demo solution

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
}

#navbar {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display:block;
  transition: top 0.3s;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}
</style>
</head>
<body>

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

<div style="padding:15px 15px 2500px;font-size:30px;margin-top:30px;">
  <p><b>This example demonstrates how to hide a navbar when the user starts to scroll the page.</b></p>
  <p>Scroll down this frame to see the effect!</p>
  <p>Scroll up to show the navbar.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.transform = "translate(0px, 0px)";
  } else {
    document.getElementById("navbar").style.transform = "translate(0px, -30px";
  }
  prevScrollpos = currentScrollPos;
}
</script>

</body>
</html>

向下滚动滚动隐藏标题，反之亦然

2 个答案: