使用vanilla javascript滚动时,将菜单栏固定在顶部

时间:2017-02-04 04:30:39

标签: javascript html css

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

2 个答案:

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

答案 1 :(得分:0)

只需使用CSS属性position并将其值设置为fixed

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

这将使您的导航栏固定在窗口顶部,在z-index低于100的所有其他内容之前。