导航栏不会隐藏在滚动条上

时间：2019-03-28 11:20:11

标签： javascript html css scroll navbar

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

谢谢。

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>

2 个答案:

答案 0 :(得分：4)

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>

答案 1 :(得分：0)

这里的问题是，第二次滚动将覆盖第一个。 因此，您可以将代码移至单个功能。我更新了以下代码：

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>

相关问题
最新问题