topnavbar堅持不適用於Chrome和Safary，但在mozilla上工作

Question

我在我的網站頁面上有一個topnavbar，實際上在$(window).scrollTop() > 44時得到固定。這工作正常，在Mozilla上看起來不錯，但在修復topnavbar時Safari和Chrome跳躍。任何解決方案

這是我的代碼： -

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

如果不是你要找的內容，然後請更具體一點。
希望這會有所幫助。