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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
JS实现左右无缝轮播图代码
May 01 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
js实现导航吸顶效果
Feb 24 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
Nuxt.js实战和配置详解
Aug 05 Javascript
vue实现把接口单独存放在一个文件方式
Aug 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
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
php从字符串创建函数的方法
2015/03/16 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
Python Deque 模块使用详解
2014/07/04 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
Python的Lambda函数用法详解
2019/09/03 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
python实现简单的购物程序代码实例
2020/03/03 Python
深入了解Python enumerate和zip
2020/07/16 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
计算s=f(f(-1.4))的值
2014/05/06 面试题
红旗方阵解说词
2014/02/12 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers