个人中心
gpt4 book ai didi

javascript - 使用 Vanilla javascript滚动时使菜单栏固定在顶部

转载 作者：太空宇宙 更新时间：2023-11-04 09:12:18 25 4
gpt4 key购买 nike

HTML

    <!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()">&#9776;</a>
         </li>
       </ul>


      </body>
      </html>

JavaScript

     <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 而不是使用任何库或框架。

最佳答案

= 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>&#9776</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 事件上。这样它只会运行一次。

关于javascript - 使用 Vanilla javascript滚动时使菜单栏固定在顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42036473/

25 4 0
文章推荐： Python 在不重新输入函数参数的情况下覆盖函数/方法
文章推荐： Python os.exec() : Termination on running 'notify-send'
文章推荐： html - CSS |没有出现
文章推荐： python - 确保两个正则表达式找不到相同的结果