ビッグコマースナビゲーションバーのメニューをスティック

Question

私は大きな商取引のウェブサイト上で働いている、と私はスクロールのメニューを固執したい

が、私はCSSでそれを達成するために、ブートストラップを使用しているが、そのが正常に動作しない、ここに私のコードです

<div id="top-nav"> 
     <div class="CategoryList" id="TopCategoryList" data-spy="affix" data-offset-top="197" > 
      <div class="SideCategoryListClassic"> 
       <ul class="category-list" style="padding-top: 3px;"> 
        <li class=""><a href="/motorcycle-tire-warmers">MOTO-D Tire Warmers</a></li> 
        <li class=""><a href="/pro-series-motorcycle-stands">MOTO-D Stands</a></li> 
        <li class=""><a href="/cnc-motorcycle-parts">Bonamici Rearsets</a></li> 
        <li class=""><a href="/motorcycle-gps-lap-timer">MOTO-D "Next" GPS Lap Timer</a></li> 
        <li class=""><a href="/motorcycle-undersuits-and-baselayers">MOTO-D Undersuit</a></li> 
        <li class=""><a href="/spark-italy-exhaust-technologies">Spark Italy Exhausts</a></li> 
        <li class=""><a href="/performance-riding-motorcycle-accessories">Accessories</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="clear"></div> 
#top-nav.affix { 
    background-color: #333; 
    left: 0; 
    padding-bottom: 5px; 
    position: fixed; 
    right: 0; 
    text-align: center; 
    top: 0; 
    z-index: 2222; 

}

This is my dummy site

これはCSS3に来ているが、それはまだ利用できません助けを事前に

Answer 1

、ありがとうございました。 position: stickyhereについて詳しく読むことができます。

その間、私はこれを円滑な移行にするためにJavaScriptを使用します。

私はscrollTop番号を推測しているので、必要に応じて調整してください。

jQueryの

$(window).scroll(function(){ 
if ($(window).scrollTop() >= 60) { 
    $('top-nav').addClass('fixed'); 
} 
else { 
    $('top-nav').removeClass('fixed'); 
} 

}）。

JavaScriptも同じことができますが、すでにjQueryをロードしているので、それを使うこともできます。