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>

javascript html css scroll navbar

28.03.2019 12:20

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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>

28.03.2019 12:28

Ответ принят как подходящий

Проблема здесь в том, что второй 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>

28.03.2019 12:32

Другие вопросы по теме

Почему flex-shrink ведет себя так в моем примере?

Проблема с интервалом между границами в таблице div

Почему я не могу получить ввод из поля ввода?

Как центрировать текст во flexbox?

Ionic 4 ion-list horizontal — хотите отобразить список горизонтальных вкладок ion-list

Скрыть скрипт src на странице?

Анимация javascript на холсте - прямоугольник, работающий слева направо, меняющий цвет - проблема с повторением анимации

Мои html-страницы не читают мой лист и классы style.css

Я не могу показать имя файла на входе

Как я могу определить colspan со структурой таблицы, которая использует flex?

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

Ответы 2

Другие вопросы по теме

Похожие вопросы