bootstrap頂部導航欄,bootstrap使用之stickUp(固定導航欄)

 2023-12-25 阅读 30 评论 0

摘要:1、stickUp是jQuery下的一個導航欄插件,當界面較長時,導航欄會固定在頂部,不會移動。 如下圖: 2、廢話少說,下載http://www.bootcss.com/p/stickup/。在里面有示例文檔,只是注意看index的時候js寫在下面的。 3、我自己寫的鏈接下次

1、stickUp是jQuery下的一個導航欄插件,當界面較長時,導航欄會固定在頂部,不會移動。

如下圖:

2、廢話少說,下載http://www.bootcss.com/p/stickup/。在里面有示例文檔,只是注意看index的時候js寫在下面的。

3、我自己寫的鏈接下次帶來。

4、注意如果要設置錨點,錨點的數量要跟導航欄中的一一對應。

    <script type="text/javascript">jQuery(function($) {$(document).ready( function() {$('.navbar-wrapper').stickUp({parts: {//這里與導航條對應,比較嚴格,不能少也不能多。0:'home',//少了導致導航欄不可用,多了不能自動滾動1:'features',2: 'updates',3: 'installation',4: 'one-pager',5: 'extras',6: 'wordpress',7: 'contact'},itemClass: 'menuItem',itemHover: 'active',topMargin: 'auto'});});});</script>
 <div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li class="menuItem active"><a href="#home">Home</a></li><li class="menuItem"><a href="#features">Features</a></li><li class="menuItem"><a href="#updates">Updates</a></li><li class="menuItem"><a href="#installation">Installation</a></li><li class="menuItem"><a href="#one-pager">One Pager</a></li><li class="menuItem"><a href="#extras">Extras</a></li><li class="menuItem"><a href="#wordpress">Wordpress</a></li><li class="menuItem"><a href="#contact">Contact</a></li>    </ul></div>


5、導入的文件較多,注意文件路徑。

?

?

?

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://808629.com/196739.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 86后生记录生活 Inc. 保留所有权利。

底部版权信息