javascript - 垂直导航栏移至顶部

我试图使我的垂直导航栏在用户滚动时移动到顶部（原始位置不在顶部）。
我只知道HTML，CSS和JavaScript，所以不知道jQuery。
这是导航栏的代码：

类或ID名称是否有问题，或者是JavaScript代码？

	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>

最佳答案

您需要立即调用事件处理程序，而不是将其附加到侦听器。拆下括号。

window.addEventListener("scroll", navigationFixing);

此外，navigation.getBoundingClientRect().bottom将在位置更改时更改。最好在功能之外进行设置。

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

另请注意@bestinamir，您的CSS已被覆盖。它需要一些工作，但是您可以从以下内容开始：

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

关于javascript - 垂直导航栏移至顶部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55051963/