jquery导航菜单置顶跟随插件stickUp

jquery菜单置顶stickUp

不知亲们碰到过这样的一个网站效果没有,网站中有一个导航菜单,起初不是在顶部显示的,但页面往下滚的时间,它会跟着滚动,当滚动顶部位置时就定住,一直在顶部是示。今天介绍的stickUp就是一款让您的导航菜单置顶,并跟随页面的滚动而滚动的jquery插件,当然stickUp也可以实现单页导航滚动效果,仅需设置一下参数就可以了。

jquery实例:stickUp使用方法

引入核心文件

<script src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js"></script>
<script src="js/stickUp.min.js"></script>

构建html

<div class="navbar-wrapper"></div>

写入JS初始化

$(document).ready( function() {
       $('.navbar-wrapper').stickUp();
   });

实现单页导航

1、首先建立好html元素,并给每一个页面的元素加上ID属性,同时记下ID为写JS下使用。

<div id="home">内容</div>
<div id="features">内容</div>
<div id="news">内容</div>
<div id="installation">内容</div>
<div id="one-pager">内容</div>
<div id="extras">内容</div>
<div id="wordpress">内容</div>
<div id="contact">内容</div>

2、写入JS

$(document).ready( function() {
                  //enabling stickUp on the '.navbar-wrapper' class
                  $('.navbar-wrapper').stickUp({
                                parts: {
                                  0:'home',//与html元素对应的首页ID,以下的类似
                                  1:'features',
                                  2: 'news',
                                  3: 'installation',
                                  4: 'one-pager',
                                  5: 'extras',
                                  6: 'wordpress',
                                  7: 'contact'
                                },
                                itemClass: 'menuItem',
                                itemHover: 'active'
                              });
                });

下载地址:本站下载 | 百度云 | 官方下载

Comments are closed.