固定菜单不起作用（菜单不 "stick" ）

Question

我想做一个固定的菜单。但是，当它滚动时，菜单不会 "stick" 到浏览器 window。当我用 navbar__box 删除 position: relative; 时，菜单是粘性和滚动的，但是从粘性到固定的过渡并不平滑...

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/classes 的顺序。看起来 .nav__box 正在覆盖 .fixed

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

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

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

固定菜单不起作用（菜单不 "stick" ）

Fixed menu does not work (menu does not "stick" )

html

javascript

css

jquery

css-position