Навбар не будет прятаться при прокрутке - PullRequest
Новая
       31

Навбар не будет прятаться при прокрутке

1 голос
/ 28 марта 2019

Я только что включил кнопку в правом нижнем углу сайта, чтобы позволить пользователям вернуться в верхнюю часть страницы, но, похоже, он не позволил моей навигационной панели скрыться при прокрутке пользователя.Я смотрел на это все утро и был бы очень признателен за свежую пару глаз, чтобы посмотреть на это, любая помощь была бы великолепна!

Спасибо. 

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 ]

4 голосов
/ 28 марта 2019

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>
0 голосов
/ 28 марта 2019

Проблема здесь в том, что вторая прокрутка заменяет первую.Таким образом, вы можете переместить код в одну функцию.Я обновил код ниже: 

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>
...