Question

我试图在用户滚动时将垂直导航栏移到顶部（原始位置不在顶部）。我只了解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>

Answer 1

您希望立即调用事件处理程序，而不是将其附加到侦听器。删除括号。

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;
}

Answer 2

@mhatch 感谢您的回答。我按照您说的做了，但仍然没有用。我什至尝试将JavaScript代码更改为此。

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>

垂直导航栏移至顶部

2 个答案: