最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果。

smohan.fixednav.js

/*
* 随滚动条固定导航到顶部插件
* autho:Smohan
* http://www.smohan.net
*/
;
(function ($) {
$.fn.smohanfixednav = function (mtop, zindex) {
var nav = $(this),
isIE6 = 'undefined' == typeof(document.body.style.maxHeight),
mtop = mtop,
zindex = zindex,
dftop = nav.offset().top - $(window).scrollTop(),
dfleft = nav.offset().left - $(window).scrollLeft(),
dfcss = new Array;
dfcss[0] = nav.css("position"),
dfcss[1] = nav.css("top"),
dfcss[2] = nav.css("left"),
dfcss[3] = nav.css("zindex"),
$(window).scroll(function (e) {
$(this).scrollTop() > dftop ? isIE6 ? nav.css({
position : "absolute",
top : eval(document.documentElement.scrollTop),
left : dfleft,
"z-index" : zindex
}) : nav.css({
position : "fixed",
top : mtop + "px",
left : dfleft,
"z-index" : zindex
}) : nav.css({
position : dfcss[0],
top : dfcss[1],
left : dfcss[2],
"z-index" : dfcss[3]
})
})
}
})(jQuery)

 注: 由于jquery的1.9 以上的版本,不再支持 $.browser 方法。所以将原有插件中判断是否是IE6 的语句 $.browser.msie&&$.browser.version=="6.0" 改为 'undefined' == typeof(document.body.style.maxHeight)

使用方法:

<script type="text/javascript" src="/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="smohan.fixednav.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('.mainavi').smohanfixednav(0,999);
});
</script>

  

1、(0,999)两个数值,第一个一个是设置在滚动时导航栏与顶部的距离,第二个是导航栏的zindex

2、mainavi 为导航栏的class

jquery实现导航栏跟随窗口滚动的更多相关文章

  1. jQuery Mobile 导航栏

    jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...

  2. jQuery实现导航栏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 微信小程序tab切换,可滑动切换,导航栏跟随滚动实现

    简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...

  4. jquery 实现导航栏滑动效果

    精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...

  5. jQuery实现浮动层跟随页面滚动效果

      helloweba.com Author:月光光 Time:2010-11-29 09:02 Tag: jquery  滚动 在本文中,我将介绍一个可以跟随页面滚动的层效果,当用户滚动鼠标滚轮或者 ...

  6. 简单的jquery左侧导航栏和页面选中

    这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...

  7. 简单的jquery左侧导航栏和页面选中效果

    这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...

  8. jquery实现导航栏头部点击变换颜色

    实现效果如下: 话不多说直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  9. jquery实现导航栏鼠标点击后实行背景高亮,点击离开恢复(超级简单!!!!),jquery导航栏

    1.header部分要引入Jquery <asp:Content ID="HeaderContent" runat="server" ContentPla ...

随机推荐

  1. Linux (二) vi

    1  步骤 1)  vi  test.txt 进入一般模式 2)   i    进入编辑模式,输入内容 3)  Esc 回到一般模式 4)  :wq 存储后退出 2  编辑模式 [i] 光标处插入, ...

  2. Unity开发之NGUI系列

    Unity插件收集 在Unity开发过程中会收集一些插件,收集这些插件的目的并不是我喜欢在开发中使用插件,而是本着喜欢的态度去收集的,就像我喜欢收集模型一样: 还有一点就是通过了解插件能让我知道Uni ...

  3. QTP和WinRunner区别

    QTP,全称为Quick Test Professional,它与WinRunner同为MI公司开发的功能强大的功能测试工具.从时间上来看,WinRunner在1995年便已经推出,远早于QTP,而Q ...

  4. SQL 第一范式、第二范式、第三范式、BCNF

    作者 : Dolphin 原文地址: http://blog.csdn.net/qingdujun/article/details/27365979 一.第一范式 1NF 要求:每一个分量必须是不可分 ...

  5. 数字签名的定义及在K2 BPM业务流程管理中的应用

    背景介绍 ARX(算法研究)公司是一家数字签名和数据安全解决方案的领先供应商.该公司专门从事结合软件和硬件产品为大中小型计算机环境设计和实现数字签名解决方案. 很多流程都需要和数字签名进行集成,用于审 ...

  6. scala学习之第三天:数组的特性与使用技巧

    1.数组 Scala数组与Scala序列是兼容的 - 在需要Seq[T]的地方可由Array[T]代替.最后,Scala数组支持所有的序列操作. 隐式转换 方法1:通过scala.collection ...

  7. Linux内核启动

    Linux内核启动过程概述 Linux的启动代码真的挺大,从汇编到C,从Makefile到LDS文件,需要理解的东西很多.毕竟Linux内核是由很多人,花费了巨大的时间和精力写出来的.而且直到现在,这 ...

  8. git流程及操作

    一.git认识 git是什么?Git是目前世界上最先进的分布式版本控制系统 二.git安装 三.git创建本地库 1.首先选择e盘新建一个文件夹如douban 2.点击鼠标右键,执行Git Bash ...

  9. INADDR_ANY的确切含义

    INADDR_ANY就是inet_addr("0.0.0.0") 首先,需要明确的是当服务器的监听地址是INADDR_ANY时设置的是服务器的IP地址. 其次,当服务器的监听地址是 ...

  10. linux下c++开发环境安装(eclipse+cdt)

    方法一: 此外,众所周知,Eclipse是Java程序,因此很容易就实现了跨平台,也是众所周知,Java的大型程序非常吃内存,即使有512MB内存, 仍然感觉Eclipse的启动速度很慢.个人认为1G ...