topnavbar ChromeとSafaryでは動作しませんが、mozillaで作業しています

Question

$(window).scrollTop() > 44が実際に修正された私のウェブサイトのページにtopnavbarがあります。これはうまく動作し、Mozillaではうまくいきましたが、サファリとクロムでジャンプすると、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;} 

あなたが探しているものでない場合は、少し具体的にしてください。
これが役に立ちます。