Javascript 有人能解释一下我的粘性导航菜单出了什么问题吗？

我一次又一次地尝试找出我的粘性导航，我相信这与我的JavaScript的一部分有关。我还包括了我的html和css，以防出现错误

编辑：我把前面的语句写错了，我希望在设定点滚动后，菜单保持在顶部。一旦我卷回，我希望它回到那个点。多谢各位

HTML代码

<!--Navigation Menu-->
    <div id="navbar">
        <a href="#home">Home</a>
        <a href="#relationships">Relationships</a>
        <a href="#beauty">Beauty</a>
        <a href="#entertainment">Entertainment</a>
        <a href="#selfcare">Self Care</a>
    </div>

JS代码

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");

var sticky = navbar.offsetTop;

function myFunction() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
}

您在css中拼写“position”错误。应该是：

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

---

我认为你的导航栏需要让类在页面加载时保持粘性：

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

#导航栏{
溢出：隐藏；
背景色：黑色；
}
#导航栏a{
浮动：左；
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px；
文字装饰：无；
字体系列：高潮Sans；
}
.内容{
填充：16px；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.粘性+.内容{
填充顶部：60px；
}

谢谢您的关注。不幸的是，这还不是问题。你确定吗？只要改变一下打字错误，导航栏就变得粘乎乎的。用你的代码和一些虚拟内容检查这个代码笔-。我的id在我提供的代码部分之外有一些错误，但一旦我更改了你的建议和其他错误，它就工作得很好。谢谢，谢谢，不过我相信我的问题用词错了。我的意思是在滚动后的某个点上进行粘性导航。如果目标浏览器支持，则有一个

位置：粘性处理此逻辑的css定义（主要是）。如果您能整理一下以更好地说明问题，请将您的源代码移到一张小提琴中：
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}