I'm making a Navbar. Well, it is working correctly (I scroll down and the style changes), but then, when I scroll to the top, the styles stay the same. Is there a way to change styles when I scroll to the top part?
Here's the HTML
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a href="#"><span>Visit San Francisco</span></a>
</div>
Here's the JavaScript:
var body = document.querySelector("body");
var navbar = document.querySelector(".navbar");
var cover = document.querySelector(".cover");
function changeNavbarStyle() {
navbar.classList.add("postConv");
}
function removeNavbarStyle() {
navbar.classList.remove("postConv");
}
body.onscroll = changeNavbarStyle;
Most of modern browsers such as "Firefox", "Opera", "Edge", ... use document.documentElement.scrollTop to detect the position of scroll from top of the page. So maybe if you change your script as follows, it works:
var body = document.querySelector("body");
var navbar = document.querySelector(".navbar");
var cover = document.querySelector(".cover");
function changeNavbarStyle() {
navbar.classList.add("postConv");
if(document.documentElement.scrollTop === 0) {
removeNavbarStyle();
}
}
function removeNavbarStyle() {
navbar.classList.remove("postConv");
}
body.onscroll = changeNavbarStyle;body {
min-height: 850px;
}
.postConv {
background-color: #c5bdd1;
position: fixed;
top: 0;
left: 0;
width: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nav-style</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a href="#"><span>Visit San Francisco</span></a>
</div>
<script src="script.js"></script>
</body>
</html>You can use HTML DOM onScroll event.
So your HTML code would look like:
<body id="body" onscroll="scroll()">
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a href="#"><span>Visit San Francisco</span></a>
</div>
</body>
And in your JavaScript code you will define your scroll() method like:
function scroll() {
var elmnt = document.getElementById("body");
var y = elmnt.scrollTop;
if(y == 0) {
navbar.classList.remove("postConv");
} else {
navbar.classList.add("postConv");
}
}