固定菜单不起作用（菜单不“粘”）

Question

我想做一个固定的菜单。但是，滚动时，菜单不会“粘贴”到浏览器窗口。当我用position: relative;删除navbar__box时，菜单处于粘滞状态并滚动，但是从粘滞状态到固定状态的过渡并不顺利...

window.onscroll = function() {myFunction()};
function myFunction() {
  if (window.scrollY > 0) {
    var parentwidth = $('.header').width();
    $('.navbar__box').addClass("fixed").width(parentwidth);
  } else {
    $('.navbar__box').removeClass('fixed').width(parentwidth);
  }
}

.fixed {
  background: aliceblue;
  box-shadow: 0 1px 7px $black;
  position: fixed;
  top: 0;
  padding-top: 10px;
  z-index: 1299;
}
    
.navbar__box {
  position: relative;
  transition: all 0.3s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header" >
  <div class="navbar__box">
    <div class="navbar">
      <nav  class="navbar__nav">
        <ul id="nav" class="navbar__nav--list">
          <li class="navbar__nav--list-item">
            <a href="#Home">Home</a>
          </li>
         </ul>
      </nav>
     </div>
  </div>
</header>

Answer 1

更改CSS /类的顺序。似乎.CreateParameter正在覆盖.nav__box

.fixed

Fiddle

Answer 2

更新了CSS-example fiddle-我刚刚删除了不必要的位置：.navbar__box上的相对位置。

.fixed {
background: red;
box-shadow: 0 1px 7px black;
position: fixed;
top: 0;
padding-top: 10px;
z-index: 1299;
}

.navbar__box {
transition: all 0.3s ease-in-out;
}