빅 상거래 탐색 바 메뉴를 스틱

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'); 
} 

});

자바 스크립트에서도 똑같은 작업을 수행 할 수 있습니다.하지만 이미 jQuery를로드 중이므로 사용할 수도 있습니다.