CODEWITHSUNDEEP
javascripthtmlcssscrollnavbar
Hector Harris-Burton
Hector Harris-Burton

Reputation: 101

Navbar won't hide on scroll

I've just included a button on the bottom right of the site to allow users to go back to the top of the page but it seems to have cancelled out my navbar from hiding when the user scrolls. I've been looking at it all morning and would really appreciate a fresh pair of eyes to look at it, any help would be great!

Thanks.

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>

Upvotes: 1

Views: 87

Answers (2)

Rhythm Ruparelia
Rhythm Ruparelia

Reputation: 667

The issue here is that the second onscroll overrides the first one. So, you can move the code to single function. I have updated the code below:

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>

Upvotes: 0

Kaddath
Kaddath

Reputation: 6151

window.onscroll can be set in one exemplary only, when you set it a second time, it replaces the first.

Solution: put all your code in the same function (I added scrollFunction(); to the first, but that can be the contrary):

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>

Upvotes: 4

Related Questions