javascript - 如何使用javascript在html中制作粘性菜单栏

Question

我想在我的 html 网站中制作一个粘性菜单栏。

但不能让它变粘。

html 标记

<header class="header__container" id="myHeader">
     /*navbar html part is here*/
</header>

css 部分

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

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

js代码

<script type="text/javascript">
window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

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

问题出在哪里找不到

Answer 1

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

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

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

body {
  height: 9000px;
}

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

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

<header class="header__container" id="myHeader">
     <nav class="content">
       <ul>
         <li>1</li>
         <li>2</li>
       </ul>
     </nav>
</header>

解释一下你到底想达到什么目的？