Javascript 如何制作粘性导航条？

我试图编写一些代码来制作一个粘性导航条，这样当我向下滚动时，位置是固定的，但是，它不起作用。我想知道CSS是否是问题所在，因为大多数HTML和javascript不会真正影响它。我已经在我的其他一些网站上试用过了，它们都很管用，但在这个网站上似乎不管用

<div id="main-nav">
    <nav>
        <h2 id="logo" class="main-nav">Captain Max from ERA</h2>
        <br>
        <ul class="main-nav">
            <li> <a href="#">Listings</a></li>
            <li> <a href="#">Get in touch</a></li>
            <li> <a href="#">Projects</a></li>
        </ul>
    </nav>
</div>

---

该网站的链接是

所有内容都是正确的，但您必须在下面添加一些CSS才能正常工作

<style>
#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: lightblue;
  color: black;
}

#navbar a.active {
  background-color: blue;
  color: white;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
</style>

#导航栏{
溢出：隐藏；
背景色：#333；
}
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
#导航栏a：悬停{
背景颜色：浅蓝色；
颜色：黑色；
}
#导航条a.激活{
背景颜色：蓝色；
颜色：白色；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}

粘性导航示例
当您到达滚动位置时，导航栏将粘在顶部

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效

我在您的网站上看到的是您没有正确关闭

脚本。您错过了一个
closed}
brass

<script>
var navbar = document.getElementById("main-nav");
var sticky = navbar.offsetTop;
function myFunction() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
   }

</script>


var navbar=document.getElementById（“主导航”）；
var sticky=navbar.offsetTop；
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}

谢谢，但我添加了CSS，只是我忘了在中添加它。。。谢谢你的提醒！然而，我的仍然不能真正工作。那不是document.getElementById（'main-nav'）吗？另外，你不需要在h2和ul上使用相同的类-你可以使用.main nav ul来瞄准ul。哦，好的，谢谢。我试试。好的，谢谢。我试试看。编辑：但它似乎仍然不起作用。你的网站有改动吗？因为我看不到任何变化。哦，我只是在括号里测试了一下。稍后会把它和其他很多东西一起上传。好的。谢谢我这样做是为了我的朋友，所以这是他的网站。别忘了投票
我应该投票给被接受的答案吗？如果一个答案帮助你解决你的问题，你接受它，你也应该考虑如果你有声誉就投票。如果其他答案也有帮助，你也可以投票支持。与接受答案不同的是，您可以对问题的任意多个答案进行投票。
<style>
#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: lightblue;
  color: black;
}

#navbar a.active {
  background-color: blue;
  color: white;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
</style>

<script>
var navbar = document.getElementById("main-nav");
var sticky = navbar.offsetTop;
function myFunction() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
   }

</script>