现在的位置: 首页 > 综合 > 正文

bootstrap使用之stickUp(固定导航栏)

2018年02月18日 ⁄ 综合 ⁄ 共 1046字 ⁄ 字号 评论关闭

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、导入的文件较多,注意文件路径。

 

 

 

抱歉!评论已关闭.