我工作的大電子商務網站，我想貼在滾動菜單，我已經使用引導程序來實現與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

預先感謝您的幫助

來源

2017-10-13 Rahul singh

是不是已經固定在頂部的導航欄？ –

是的，先生，但如果你看看我的虛擬網站，雖然滾動它並沒有提供一個平滑的滾動http://motodummygmailcom6.mybigcommerce.com/?ctk=S5IH79487W1BH6L17GBF0 –

所以你想平穩過渡？ –

這即將CSS3，但它尚未公佈。你可以閱讀更多關於position: stickyhere。

與此同時，我會使用一些JavaScript來平滑過渡。

我只是猜測與scrollTop號碼，所以根據需要調整它。

JQUERY

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

}）;

你也可以在plain ole JavaScript中做同樣的事情，但是既然你已經加載了jQuery，不妨使用它！

來源

2017-10-13 19:12:51 Tricky

$（'。affix'）.css（{display：'none' }）; （'。affix-top'）.css（{'012''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' –

大商貿堅守導航欄菜單

回答

JQUERY

相關問題