A Vertical Navigation Bar Moving to The Top

Question

I'm trying to make my vertical navigation bar to move to the top when the user scrolls (the original position is not at the top). I only know HTML, CSS and JavaScript, so I don't know jQuery. Here is the code for the navigation bar:

Is there something wrong with the class or id names or is it the JavaScript code?

 var body = document.getElementsByTagName("body")[0]; var navigation = document.getElementById("navigation"); window.addEventListener("scroll", navigationFixing()); function navigationFixing() { if (body.scrollTop > navigation.getBoundingClientRect().bottom) {navigation.className = "fixedNavigation"; } else { navigation.className = "notFixedNavigation"; } } 

 #navigation {list-style-type: none; width: 15%; margin: 0px; padding: 0px; font-size: 35px; border: 1px solid; height: 100%; background-color: #d6d6c2; overflow: auto; position: absolute; } .navigationbar { border-bottom: 1px solid black; } .navigationbar a {display: block; background-color: #C0C0C0; padding-left: 10px; padding-bottom: 16px; text-decoration: none; color: #ffffff; } .navigationbar a:hover {background-color: #404040; color: white;} .navigationbar a.nuvarande {background-color: black; } .fixedNavigation { position: fixed; top: 0; left: 0; } .notFixedNavigation { position: absolute; } 

 <ul id="navigation" class="notFixedNavigation"> <li class="navigationbar"> <a href="index.html">Home</a> </li> <!---------------DATOR------------------- <li class="navigationbar"> <a href="play.html">Play</a> </li> ----------------------------------------> <li class="navigationbar"> <a href="" class="nuvarande">Rules</a> </li> <li class="navigationbar"> <a href="tactics.html">Tactics</a> </li> <li class="navigationbar"> <a href="contact.html">Contact</a> </li> </ul> 

Answer 1

You care calling your event handler immediately, instead of attaching it to the listener. Remove the parens.

window.addEventListener("scroll", navigationFixing);

In addition, navigation.getBoundingClientRect().bottom will change when the position changes. Better to set it outside the function.

var pos = navigation.getBoundingClientRect().bottom;
function navigationFixing() {
  if (body.scrollTop > pos) {...}
}

Also note from @bestinamir, your CSS is being overwritten. It needs some work, but you can start with:

.fixedNavigation {
  position: fixed !important;
  top: 0;
  left: 0;
}

Answer 2

@mhatch Thanks for the answer. I did what you what you said and it still did not work. I even tried to change the JavaScript code to this instead.

 var body = document.getElementsByTagName("body")[0]; var navigation = document.getElementById("navigation"); window.addEventListener("scroll", navigationFixing); var pos = navigation.getBoundingClientRect().bottom; function navigationFixing() { /*if (body.scrollTop > pos) {navigation.className = "fixedNavigation"; } else { navigation.className = "notFixedNavigation"; }*/ if (body.scrollTop > pos) {navigation.classList.remove("NotFixedNavigation"); navigation.classList.add("fixedNavigation") } else { navigation.classList.remove("fixedNavigation"); navigation.classList.add("notFixedNavigation") } } 

 #navigation {list-style-type: none; width: 15%; margin: 0px; padding: 0px; font-size: 35px; border: 1px solid; height: 100%; background-color: #d6d6c2; overflow: auto; /*position: absolute*/ } .navigationbar { border-bottom: 1px solid black; } .navigationbar a {display: block; background-color: #C0C0C0; padding-left: 10px; padding-bottom: 16px; text-decoration: none; color: #ffffff; } .navigationbar a:hover {background-color: #404040; color: white;} .navigationbar a.nuvarande {background-color: black; } .fixedNavigation { position: fixed; top: 0; left: 0; } .notFixedNavigation { position: absolute; } 

 <ul id="navigation" class="notFixedNavigation"> <li class="navigationbar"> <a href="index.html">Home</a> </li> <li class="navigationbar"> <a href="" class="nuvarande">Rules</a> </li> <li class="navigationbar"> <a href="tactics.html">Tactics</a> </li> <li class="navigationbar"> <a href="contact.html">Contact</a> </li> </ul>