垂直导航栏移至顶部

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>