的 JQUERY

Question

我正在大型商务网站上工作，我想在滚动菜单上使用粘贴菜单，我已经使用bootstrap来实现与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

提前感谢您的帮助

Answer 1

这是CSS3的问题，但还没有。您可以详细了解position: sticky here。

与此同时，我会使用一些JavaScript来实现平滑过渡。

我只是猜测了scrollTop编号，所以根据需要进行调整。

的 JQUERY

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

}）;

你也可以在普通的MIME中做同样的事情，但是因为你已经加载了jQuery，不妨使用它！

Big commerce stick导航栏菜单

1 个答案:

的 JQUERY