有人可以解釋我的粘性導航菜單出了什么問題嗎？

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>