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、導入的文件較多,注意文件路徑。
?
?
?
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态