注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

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

菜单 fishcity 3573浏览

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'
                              });
                });

转载请注明:jQ酷 » jquery导航菜单置顶跟随插件stickUp

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。