使用香草javascript滚动时，使菜单栏固定在顶部 HTML 准许进入 JavaScript document.getElementById（'topnav'）。addEventListener （'scroll'，function（）{ document.getElementById（'topnav'）.style.position=“fixed”； document.getElementById（'topnav'）.style.top=10%； document.getElementById（'topnav'）。style.width=100%； });

我的javascript部分不工作。请告诉我如何更正此代码。

---

我想在滚动时创建一个固定的菜单栏，使用普通javascript，不使用任何库或框架。

=10%

和

=100%

。这些值必须是字符串。像这样：

='10%'

和

='100%'

每当元素的滚动条移动时，onscroll事件就会触发。您正在将侦听器添加到不滚动的元素中。（无溢出）

您需要将其添加到窗口对象中

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

但这不是一个好主意。你应该使用css来处理类似的事情。此函数将在窗口每次滚动时启动，即使只是一点点，并且在滚动时将启动多次。您只需要设置这些属性一次

如果运行此命令，您将看到一个计数器，显示在滚动时函数被调用的次数

var-topnav=document.getElementById（'topnav'）；
var count=document.getElementById（'count'）；
window.onscroll=函数（）{
count.textContent=Number（count.textContent）+1；
topnav.style.position=“固定”；
topnav.style.top='10%'；
topnav.style.width='100%'；
};





&9776
滚动事件：

line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line
line


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

这将使导航栏固定在窗口顶部，位于z索引小于100的所有其他内容前面。
为什么不只是CSS
#topnav{位置：固定；顶部：10%；左侧：0；右侧：0；}
。您试图将滚动事件侦听器附加到
#topnav
，这毫无意义。@MichaelCoker我知道如何使用css。我需要javascript方面的帮助。为什么我们不能在此附加scroll eventlistener@MichaelCoker，因为除非您在该元素中滚动，否则不会有滚动事件。它只是一个
ul
，没有疯狂的css或其他东西，它永远不会触发滚动事件。
document.getElementById（'topnav'）。addEventListener（'scroll'，function（）{document.getElementById（'topnav'）。style.position=“fixed”；document.getElementById（'topnav'）。style.top='10%；document.getElementById（'topnav'））.style.width='100%；}）-在那里，JS是固定的，但它不做任何事情，因为在您的
ul
上不会有滚动事件。我假设您希望在滚动
窗口时修复菜单，因此您将使用此事件侦听器代替
窗口。addEventListener（'scroll'，function（）{…}）
// 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%';
};

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