<!DOCTYPE html>
<html>
<head>
<title>Admission</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<ul class="nav" id="topnav">
<li><a class="active" href="#">About Us</a></li>
<li><a href="#">Schools</a></li>
<li><a href="#">General Forms</a></li>
<li><a href="#">Contact Us</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
</body>
</html>
<script>
document.getElementById('topnav').addEventListener
('scroll',function(){
document.getElementById('topnav').style.position="fixed";
document.getElementById('topnav').style.top=10%;
document.getElementById('topnav').style.width=100%;
});
</script>
我的javascript部分无效。请告诉我如何更正此代码。 我想在滚动时创建一个固定的菜单栏,使用vanilla javascript而不使用任何库或框架。
答案 0 :(得分:1)
= 10%
和= 100%
。这些值必须是字符串。像这样:= '10%'
和= '100%'
。
只要元素的滚动条移动,就会触发onscroll事件。您正在将侦听器添加到不滚动的元素。 (没有溢出)。
您需要将其添加到窗口对象。
// It's not necessary to look up the element every time. Just store a reference
var topnav = document.getElementById('topnav');
// On scroll event
window.onscroll = function() {
topnav.style.position = "fixed";
topnav.style.top = '10%';
topnav.style.width = '100%';
};
但这不是一个好主意。你应该使用css来做这样的事情。每次窗口滚动时,此功能都会触发,即使只是一点点,并且在滚动时会多次触发。您只需要设置一次这些属性。
如果你运行它,你会看到一个计数器,显示你滚动时调用该函数的次数。
var topnav = document.getElementById('topnav');
var count = document.getElementById('count');
window.onscroll = function() {
count.textContent = Number(count.textContent) + 1;
topnav.style.position = "fixed";
topnav.style.top = '10%';
topnav.style.width = '100%';
};
<ul class="nav" id="topnav">
<li><a class="active" href="#">About Us</a></li>
<li><a href="#">Schools</a></li>
<li><a href="#">General Forms</a></li>
<li><a href="#">Contact Us</a></li>
<li class="icon"><a>☰</a></li>
<li>Scroll events: <span id="count"></span></li>
</ul>
line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>
如果由于某种原因你不能使用css,那么在js中更好的方法就是在window.onload事件上。这样它只会运行一次。
答案 1 :(得分:0)
只需使用CSS属性position
并将其值设置为fixed
。
.nav{
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
这将使您的导航栏固定在窗口顶部,在z-index低于100的所有其他内容之前。