top navbar sticky 不适用于 Chrome 和 Safari，但适用于 mozilla答案

【问题标题】：topnavbar sticking not working on Chrome and Safary, but working on mozillatop navbar sticky 不适用于 Chrome 和 Safari，但适用于 mozilla
【发布时间】：2018-01-17 01:07:18
【问题描述】：

我的网站页面上有一个顶部导航栏，当$(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>

【问题讨论】：

标签： javascript jquery html css google-chrome

【解决方案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;}

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

【讨论】：