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 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
angular2实现统一的http请求头方法
Aug 13 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 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+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
python通过scapy获取局域网所有主机mac地址示例
2014/05/04 Python
深入解析Python中的WSGI接口
2015/05/11 Python
Python实现八大排序算法
2016/08/13 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
简述Python2与Python3的不同点
2018/01/21 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
浅谈python常用程序算法
2019/03/22 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
理货员的岗位职责
2013/11/23 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
跳蚤市场口号
2014/06/13 职场文书
党员演讲稿
2014/09/04 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript