导航栏不会在滚动时隐藏答案

【问题标题】：Navbar won't hide on scroll导航栏不会在滚动时隐藏
【发布时间】：2019-03-28 11:20:10
【问题描述】：

我刚刚在网站的右下角添加了一个按钮，允许用户返回页面顶部，但当用户滚动时，它似乎取消了我的导航栏隐藏。我整个早上都在看它，真的很感激有一双新的眼睛来看看它，任何帮助都会很棒！

谢谢。

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

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}

function topFunction() {
  document.body.scrollTop = 0; 
  document.documentElement.scrollTop = 0; 
}

nav {
 z-index: 99;
 box-sizing: border-box;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 padding: 20px 60px;
 text-align: center;
 background-color: white;
 font-size: 18px;
 letter-spacing: 1px;
 transition: top 0.3s;
 border-bottom: #f1f1f1 2px solid;
}

nav a:first-child {
  float: left;
}

.main-nav {
  text-decoration: none;
  display: inline-block;
  float: right;
  text-transform: uppercase;
  color: #adb3c1;
  padding: 1px 0;
  margin: 0 10px;
  transition: all 0.15s ease-in-out;
  z-index: 10;
}

#navigation a:hover {
 color: blue;
 transition: 0.5s;
}

.fa-long-arrow-alt-up {
  display: none; 
  position: fixed; 
  bottom: 20px; 
  right: 20px; 
  z-index: 99; 
  border: none; 
  outline: none; 
  background: none; 
  color: black; 
  cursor: pointer; 
  padding: 15px; 
  font-size: 18px; 
}
#myBtn:hover {
  color: red; 
}

<!DOCTYPE html>
<html>
	<head>
		<title>Hector's Portfolio</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="js/javascript.js"></script>
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
<body class="layout-portfolio">
	<nav id="navigation">
	  <a data-scroll class="main-nav" class="nav-hover" href="#home">Home</a>
	  <a data-scroll class="main-nav" class="nav-hover" href="#contact">Contact</a>
	  <a data-scroll class="main-nav" class="nav-hover" href="#about">About</a>
	  <a data-scroll class="main-nav" class="nav-hover" href="#projects">Projects</a>
	</nav>
	<!-- Button to go to top -->
	<button onclick="topFunction()" id="myBtn" class="fas fa-long-arrow-alt-up"></button>
</body>
</html>

【问题讨论】：

标签： javascript html css scroll navbar

【解决方案1】：

window.onscroll只能在一个示例中设置，当你第二次设置时，它会替换第一次。

解决方案：将所有代码放在同一个函数中（我在第一个函数中添加了scrollFunction();，但也可以相反）：

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

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}

function topFunction() {
  document.body.scrollTop = 0; 
  document.documentElement.scrollTop = 0; 
}

nav {
 z-index: 99;
 box-sizing: border-box;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 padding: 20px 60px;
 text-align: center;
 background-color: white;
 font-size: 18px;
 letter-spacing: 1px;
 transition: top 0.3s;
 border-bottom: #f1f1f1 2px solid;
}

nav a:first-child {
  float: left;
}

.main-nav {
  text-decoration: none;
  display: inline-block;
  float: right;
  text-transform: uppercase;
  color: #adb3c1;
  padding: 1px 0;
  margin: 0 10px;
  transition: all 0.15s ease-in-out;
  z-index: 10;
}

#navigation a:hover {
 color: blue;
 transition: 0.5s;
}

.fa-long-arrow-alt-up {
  display: none; 
  position: fixed; 
  bottom: 20px; 
  right: 20px; 
  z-index: 99; 
  border: none; 
  outline: none; 
  background: none; 
  color: black; 
  cursor: pointer; 
  padding: 15px; 
  font-size: 18px; 
}
#myBtn:hover {
  color: red; 
}

<!DOCTYPE html>
<html>
	<head>
		<title>Hector's Portfolio</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="js/javascript.js"></script>
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
<body class="layout-portfolio">
	<nav id="navigation">
	  <a data-scroll class="main-nav" class="nav-hover" href="#home">Home</a>
	  <a data-scroll class="main-nav" class="nav-hover" href="#contact">Contact</a>
	  <a data-scroll class="main-nav" class="nav-hover" href="#about">About</a>
	  <a data-scroll class="main-nav" class="nav-hover" href="#projects">Projects</a>
	</nav>
    <div style="height: 700px;"></div>
	<!-- Button to go to top -->
	<button onclick="topFunction()" id="myBtn" class="fas fa-long-arrow-alt-up"></button>
</body>
</html>

【讨论】：

【解决方案2】：

这里的问题是第二个 onscroll 覆盖了第一个。因此，您可以将代码移动到单个函数。我已经更新了下面的代码：

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
  
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navigation").style.top = "0";
  } else {
    document.getElementById("navigation").style.top = "-70px";
  }
  prevScrollpos = currentScrollPos;
}

function topFunction() {
  document.body.scrollTop = 0; 
  document.documentElement.scrollTop = 0; 
}

nav {
 z-index: 99;
 box-sizing: border-box;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 padding: 20px 60px;
 text-align: center;
 background-color: white;
 font-size: 18px;
 letter-spacing: 1px;
 transition: top 0.3s;
 border-bottom: #f1f1f1 2px solid;
}

nav a:first-child {
  float: left;
}

.main-nav {
  text-decoration: none;
  display: inline-block;
  float: right;
  text-transform: uppercase;
  color: #adb3c1;
  padding: 1px 0;
  margin: 0 10px;
  transition: all 0.15s ease-in-out;
  z-index: 10;
}

#navigation a:hover {
 color: blue;
 transition: 0.5s;
}

.fa-long-arrow-alt-up {
  display: none; 
  position: fixed; 
  bottom: 20px; 
  right: 20px; 
  z-index: 99; 
  border: none; 
  outline: none; 
  background: none; 
  color: black; 
  cursor: pointer; 
  padding: 15px; 
  font-size: 18px; 
}
#myBtn:hover {
  color: red; 
}

<!DOCTYPE html>
<html>
	<head>
		<title>Hector's Portfolio</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="js/javascript.js"></script>
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
<body class="layout-portfolio">
	<nav id="navigation">
	  <a data-scroll class="main-nav" class="nav-hover" href="#home">Home</a>
	  <a data-scroll class="main-nav" class="nav-hover" href="#contact">Contact</a>
	  <a data-scroll class="main-nav" class="nav-hover" href="#about">About</a>
	  <a data-scroll class="main-nav" class="nav-hover" href="#projects">Projects</a>
	</nav>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci amet aperiam consectetur cupiditate deserunt dolore ducimus eius eos et ex explicabo fugit illo impedit inventore laudantium, maiores maxime minus quaerat, quasi rerum soluta tempore vel vitae? Ad, aliquid, consequatur deserunt distinctio expedita fuga labore modi perspiciatis quia ratione sequi sint soluta tempora, voluptates voluptatum. Aperiam consequuntur cumque delectus nulla odit placeat rem saepe sunt. Id labore magnam magni modi molestiae, neque possimus veniam? Blanditiis, commodi delectus dicta enim id incidunt modi nam quas saepe soluta. Aliquid, culpa, deserunt eveniet explicabo harum hic impedit maiores placeat qui quidem, quisquam reiciendis velit voluptatem? A atque consequatur, dolorum magni molestiae repudiandae saepe. Aliquid blanditiis debitis doloremque eum facere magni officiis similique soluta totam ullam! Aliquam amet aspernatur consectetur cumque ducimus et minima quis repellat repudiandae voluptate. Adipisci amet consectetur distinctio, error ex excepturi explicabo iure magnam neque obcaecati officiis quam quibusdam, vel, voluptas?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci amet aperiam consectetur cupiditate deserunt dolore ducimus eius eos et ex explicabo fugit illo impedit inventore laudantium, maiores maxime minus quaerat, quasi rerum soluta tempore vel vitae? Ad, aliquid, consequatur deserunt distinctio expedita fuga labore modi perspiciatis quia ratione sequi sint soluta tempora, voluptates voluptatum. Aperiam consequuntur cumque delectus nulla odit placeat rem saepe sunt. Id labore magnam magni modi molestiae, neque possimus veniam? Blanditiis, commodi delectus dicta enim id incidunt modi nam quas saepe soluta. Aliquid, culpa, deserunt eveniet explicabo harum hic impedit maiores placeat qui quidem, quisquam reiciendis velit voluptatem? A atque consequatur, dolorum magni molestiae repudiandae saepe. Aliquid blanditiis debitis doloremque eum facere magni officiis similique soluta totam ullam! Aliquam amet aspernatur consectetur cumque ducimus et minima quis repellat repudiandae voluptate. Adipisci amet consectetur distinctio, error ex excepturi explicabo iure magnam neque obcaecati officiis quam quibusdam, vel, voluptas?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci amet aperiam consectetur cupiditate deserunt dolore ducimus eius eos et ex explicabo fugit illo impedit inventore laudantium, maiores maxime minus quaerat, quasi rerum soluta tempore vel vitae? Ad, aliquid, consequatur deserunt distinctio expedita fuga labore modi perspiciatis quia ratione sequi sint soluta tempora, voluptates voluptatum. Aperiam consequuntur cumque delectus nulla odit placeat rem saepe sunt. Id labore magnam magni modi molestiae, neque possimus veniam? Blanditiis, commodi delectus dicta enim id incidunt modi nam quas saepe soluta. Aliquid, culpa, deserunt eveniet explicabo harum hic impedit maiores placeat qui quidem, quisquam reiciendis velit voluptatem? A atque consequatur, dolorum magni molestiae repudiandae saepe. Aliquid blanditiis debitis doloremque eum facere magni officiis similique soluta totam ullam! Aliquam amet aspernatur consectetur cumque ducimus et minima quis repellat repudiandae voluptate. Adipisci amet consectetur distinctio, error ex excepturi explicabo iure magnam neque obcaecati officiis quam quibusdam, vel, voluptas?</p>
	<!-- Button to go to top -->
	<button onclick="topFunction()" id="myBtn" class="fas fa-long-arrow-alt-up"></button>
</body>
</html>

【讨论】：