javascript - top navbar sticky 不适用于 Chrome 和 Safari，但适用于 mozilla

Question

我的网站页面上有一个顶部导航栏，当 $(window).scrollTop() > 44 时，它实际上得到修复。这在 Mozilla 上工作正常并且看起来不错，但在 safari 和 chrome 上它在修复 topnavbar 时跳转。有什么解决办法吗？

这是我的代码:-

//js
if(viewportWidth > 1199 && $(window).scrollTop() > 44){
    $('#topnavbar').addClass('topnavbarfixed');
}

/*css*/
.topNavBar {
    position: relative;
    width: 100%;
    float: left;
    background: #fff;
    border-bottom: 1px solid rgba(243, 243, 243, 0.88);
    z-index: 999 !important;
    padding: 0 !important;
}
.topnavbarfixed {
    position: fixed !important;
    top: 0;
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topnavbar" class="topNavBar">
<!--Logo and some contents here -->
</div>

Answer 1

.navBar {
  width: 100%; height: 6%;
  background-color: rgb(240, 240, 240);
  position: sticky;
  left: 0; top: 0;
  padding: 1%;
  overflow: auto;
}
.navBar a {text-decoration: none; margin-right: 1%;}

.emptySpace {width: 100%; height: 1000000px;}

<span class="navBar">
  <a href="">Link 1</a>
  <a href="">Link 2</a>
  <a href="">Link 3</a>
  <a href="">Link 4</a>
  <a href="">Link 5</a>
</span>

<div class="emptySpace"></div>

我对你的要求有点困惑，但如果你想让导航栏在用户滚动时保持在屏幕顶部，你可能想试试

/*CSS*/
.topNavBar {position: sticky;}

如果这不是您要查找的内容，请更具体一些。
希望这会有所帮助。