使用香草JavaScript滚动时，使菜单栏固定在顶部

Question

HTML 的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 的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>

My javascript part is not working. 我的JavaScript部分无法正常工作。 Please tell me how to correct this code. 请告诉我如何更正此代码。 I want to create a fixed menu bar while scrolling, using vanilla javascript and not using any libraries or framework. 我想在滚动时使用香草javascript而不使用任何库或框架来创建固定的菜单栏。

Answer 1

= 10% and = 100% . = 10%和= 100% 。 These values must be strings. 这些值必须是字符串。 Like this: = '10%' and = '100%' . 像这样： = '10%'和= '100%' 。

The onscroll event fires whenever the element's scrollbar moves. 每当元素的滚动条移动时，就会触发onscroll事件。 You are adding the listener to an element that does not scroll. 您正在将侦听器添加到不会滚动的元素。 (no overflow). （无溢出）。

You need to add it to the window object. 您需要将其添加到窗口对象。

// 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%';
};

This is not a good idea though. 不过，这不是一个好主意。 You should use css for things like this. 您应该使用css这样的事情。 This function will fire every time the window scrolls, even just a bit, and will fire multiple times while it's scrolling. 每次滚动窗口时都会触发此功能，即使只是一点点，在滚动时也会触发多次。 You only need to set those properties once. 您只需要设置一次这些属性。

If you run this you'll see a counter that shows how many times the function gets called while you scroll. 如果运行此命令，则会看到一个计数器，该计数器显示滚动时调用该函数的次数。

 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/>

If you can't use css for some reason, a better way of doing it in js would be on the window.onload event. 如果由于某种原因不能使用css，则在js中执行此操作的更好方法是在window.onload事件上。 This way it will only run once. 这样，它将只运行一次。

Answer 2

Simply use the CSS property position and set it's value to fixed . 只需使用CSS属性position并将其值设置为fixed 。

.nav{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

This will keep your nav bar fixed at the top of the window in front of all other content with z-index's under 100. 这将使导航栏固定在窗口其他所有内容前面的窗口顶部，且z-index小于100。

使用香草JavaScript滚动时，使菜单栏固定在顶部

问题描述

HTML 的HTML

JavaScript 的JavaScript

2 个解决方案

解决方案1
1 已采纳 2017-02-04 04:53:42

解决方案2
0 2017-02-04 05:39:34

使用香草JavaScript滚动时，使菜单栏固定在顶部

问题描述

HTML 的HTML

JavaScript 的JavaScript

2 个解决方案

解决方案1 1 已采纳 2017-02-04 04:53:42

解决方案2 0 2017-02-04 05:39:34

解决方案1
1 已采纳 2017-02-04 04:53:42

解决方案2
0 2017-02-04 05:39:34