有人可以解释我的粘性导航菜单出了什么问题吗？

Question

我一次又一次地尝试找出我的粘性导航，我相信这与我的 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>

CSS 代码

#navbar {
    overflow: hidden;
    background-color: black;
}


#navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    font-family: HighTide Sans;
}

.content {
    padding: 16px;
}

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

.sticky + .content {
    padding-top: 60px;
}

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");
    }
}

Answer 1

您在 css 中拼错了“位置”。 它应该是：

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

Answer 2

我认为您的导航栏需要在页面加载时具有粘性：

 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"); } }

 #navbar { overflow: hidden; background-color: black; } #navbar a { float: left; display: block; color: white; text-align: center; padding: 14px; text-decoration: none; font-family: HighTide Sans; } .content { padding: 16px; } .sticky { position: fixed; top: 0; width: 100%; } .sticky+.content { padding-top: 60px; }

 <!--Navigation Menu--> <div id="navbar" class="sticky"> <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> <div style="min-height:1000px;"></div>