Hey there, I'm having an issue with my Sticky-menu. I've been trying to troubleshoot it but keep getting these console error messages: 1. Cannot read property 'offsetTop' of null at HTMLDocument. 2. Cannot read property 'classList' of null at myFunction (app.js:86) at window.onscroll (app.js:77) Can anyone help me figure out what's going wrong here?
This is the HTML code:
<header class="nav_main">
<div class="about_nav">
<p><a href="#b1">Lilando</a></p>
</div>
<div class="price_nav">
<p><a href="#b2">Cennik</a></p>
</div>
<div class="lilando_nav">
</div>
<div class="gallery_nav">
<p><a href="#b3">Gallery</a></p>
</div>
<div class="contact_nav">
<p><a href="#b4">Kontakt</a></p>
</div>
</header>
Here is the CSS code:
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.nav_main {
display: flex;
justify-content: space-around;
text-transform: uppercase;
overflow: hidden;}
Lastly, this is the JavaScript code:
window.onscroll = function() {myFunction()};
var navMain = document.querySelector("nav_main");
var sticky = navMain.offsetTop;
function myFunction(){
if(window.pageYOffset >= sticky){
navMain.classList.add("sticky")
} else {
navMain.classList.remove("sticky");
}
}