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 相关文章推荐
TBCompressor js代码压缩
Jan 05 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
JavaScript仿微博输入框效果(案例分析)
Dec 06 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
微信小程序实现星级评价
Nov 20 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
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中opendir函数用法实例
2014/11/15 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
js 调整select 位置的函数
2008/02/21 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
Python语法分析之字符串格式化
2019/06/13 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
聚美优品励志广告词
2014/03/14 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
购房个人委托书范本
2014/10/11 职场文书
抗洪救灾感谢信
2015/01/22 职场文书