I need change my navbar from an id to class, but when I did so the sticky part stopped working. I just want the navbar to be as it was when it was an id, just as here; https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky . That it stopped working could have something to do with the script at the end of my html document, but I don't know much about javascript yet.. Could anyone help me? Here's my html;
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="ad">
Bepaalde boeken tot -50% + gratis levering bij bestellingen boven €50!
</div>
<div> <ul class="navbar">
<li class="links"><a href="index.html">BookShop</a></li>
<li class="links"><a></a></li>
<li class="links"><a href="Talen.html">Talen</a></li>
<li class="links"><a href="Genres.html">Genres</a></li>
</ul> </div>
<p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementsByClassName("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>
my css;
.ad {
background-color: #fbf4e9;
text-align: center;
font-size:0.9rem;
padding:5px;
}
.sticky {
position: fixed;
top: 0;
}
ul.navbar {
overflow:hidden;
list-style-type:none;
background-color:#f9eedd;
width:100%;
height:auto;
margin:0;
padding:0;
z-index:10;
}
ul.navbar li a{
display:block;
color:#8e8275;
text-decoration:none;
text-align: center;
padding: 13px 10px 13px 10px;
margin: 10px 7px 10px 7px
}
ul.navbar li.links{ float:left;}
The function getElementsByClassName
returns an array of elements. If you know that you only have one and you need to select it you need to do the following:
var navbar = document.getElementsByClassName("navbar")[0]; //select first element
var sticky = navbar.offsetTop;