jQuery插件StickUp实现网页导航置顶


Posted in Javascript onApril 12, 2015

实用的jQuery网页元素固定导航置顶插件StickUp,简单的jQuery插件,实现网页元素固定,如导航固定让其总是保持在视图中可见,在one-page页面中就可以看出效果,大家可以研究研究。

使用方法:

1.加载插件和jQuery

<script src="js/jquery.js">script> 
<script src="js/stickUp.min.js">script> 
<link href="stickup.css" rel="stylesheet"> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<script src="js/bootstrap.min.js">script>

2.HTML内容(Bootstrap布局)

<div class="navbar-wrapper"> 
   <div class="container"> 
   <div class="navwrapper"> 
    <div class="navbar navbar-inverse navbar-static-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#"><stickUpa> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="menuItem active"><a href="#home">Homea</li> 
        <li class="menuItem"><a href="#features">Featuresa</li> 
        <li class="menuItem"><a href="#updates">Updatesa</li> 
        <li class="menuItem"><a href="#installation">Installationa</li> 
        <li class="menuItem"><a href="#one-pager">One Pagera</li> 
        <li class="menuItem"><a href="#extras">Extrasa</li> 
        <li class="menuItem"><a href="#wordpress">Wordpressa</li> 
        <li class="menuItem"><a href="#contact">Contacta</li>   
       </ul> 
      </div> 
     </div> 
    </div> 
   </div>

3.函数调用

<script type="text/javascript"> 
     //initiating jQuery  
     jQuery(function($) { 
      $(document).ready( function() { 
        //enabling stickUp on the '.navbar-wrapper' class 
        $('.navbar-wrapper').stickUp({ 
                parts: { 
                 0:'home', 
                 1:'features', 
                 2: 'news', 
                 3: 'installation', 
                 4: 'one-pager', 
                 5: 'extras', 
                 6: 'wordpress', 
                 7: 'contact' 
                }, 
                itemClass: 'menuItem', 
                itemHover: 'active' 
               }); 
        }); 
       }); 
<script>

查看DEMO   立即下载

以上所述就是本文的全部内容了,希望对大家熟练使用jQuery能够有所帮助。

Javascript 相关文章推荐
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 Javascript
JavaScript 数组去重详解
Sep 15 Javascript
JavaScript 面向对象与原型
Apr 10 #Javascript
javascript基本包装类型介绍
Apr 10 #Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 #Javascript
js改变embed标签src值的方法
Apr 10 #Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 #Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 #Javascript
js实现星星打分效果的方法
Jul 05 #Javascript
You might like
php for 循环语句使用方法详细说明
2010/05/09 PHP
PHP下对数组进行排序的函数
2010/08/08 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
js document.write()使用介绍
2014/02/21 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
canvas时钟效果
2017/02/16 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
如何基于python生成list的所有的子集
2019/11/11 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
python怎么提高计算速度
2020/06/11 Python
python 如何将office文件转换为PDF
2020/09/22 Python
django使用多个数据库的方法实例
2021/03/04 Python
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
教育实习生的自我评价分享
2013/11/21 职场文书
餐厅总经理岗位职责
2013/12/31 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
经典毕业生求职信
2014/07/12 职场文书
房产分割协议书范文
2014/11/21 职场文书
萤火虫之墓观后感
2015/06/05 职场文书