jquery实现导航栏跟随窗口滚动
最近在制作一个模版的时候用到的一个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实现导航栏跟随窗口滚动的更多相关文章
- jQuery Mobile 导航栏
jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...
- jQuery实现导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 微信小程序tab切换,可滑动切换,导航栏跟随滚动实现
简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...
- jquery 实现导航栏滑动效果
精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...
- jQuery实现浮动层跟随页面滚动效果
helloweba.com Author:月光光 Time:2010-11-29 09:02 Tag: jquery 滚动 在本文中,我将介绍一个可以跟随页面滚动的层效果,当用户滚动鼠标滚轮或者 ...
- 简单的jquery左侧导航栏和页面选中
这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"&g ...
- 简单的jquery左侧导航栏和页面选中效果
这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu" ...
- jquery实现导航栏头部点击变换颜色
实现效果如下: 话不多说直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- jquery实现导航栏鼠标点击后实行背景高亮,点击离开恢复(超级简单!!!!),jquery导航栏
1.header部分要引入Jquery <asp:Content ID="HeaderContent" runat="server" ContentPla ...
随机推荐
- 【读书笔记《Android游戏编程之从零开始》】11.游戏开发基础(SurfaceView 游戏框架、View 和 SurfaceView 的区别)
1. SurfaceView 游戏框架实例 实例效果:就是屏幕上的文本跟着点击的地方移动,效果图如下: 步骤: 新建项目“GameSurfaceView”,首先自定义一个类"MySurfac ...
- 【C#】1.算法温故而知新 - 简单的桶排序
该算法的时间复杂度是O(M+N),M为桶的个数,N为待排序的个数 缺点: 1.不适用于小数 2.当数值过多,太浪费空间,比如数值范围为0~99999,那需申请100000个变量,也就是要写成a[100 ...
- 从BUG工具redmine上获取数据后借助python模块pycha 画出BUG分析类报表
整体代码比较冗长,但是很好读.写的方法全是按照BUG分类去写的.所以写死了,凑合看吧,画出饼图,树状图和生成对应的数据excel,希望大家举一反三能帮助自己分析BUG #__author__ = 'x ...
- uGUI练习(二) Animate UI
练习目标 通过Animation录制UI动画 一.步骤 1.创建一个Panel,下面再创建两个子Panel 2.修改Canvas的 Render Mode为Screen Space-Camer 3.为 ...
- typicalapp.js
/** * 1.找出数字数组中最大的元素(使用Math.max函数) 2.转化一个数字数组为function数组(每个function都弹出相应的数字) 3.给object数组进行排序(排序条件是每个 ...
- JS中的Navigator 对象
Navigator 对象包含有关浏览器的信息. 很多时候我们需要在判断网页所处的浏览器和平台,Navigator为我们提供了便利 Navigator常见的对象属性如下: 属性 描述 appCodeNa ...
- jquery.Deferred promise解决异步回调
我们先来看一下编写AJAX编码经常遇到的几个问题: 1.由于AJAX是异步的,所有依赖AJAX返回结果的代码必需写在AJAX回调函数中.这就不可避免地形成了嵌套,ajax等异步操作越多,嵌套层次就会越 ...
- WorldWind源码剖析系列:WorldWind实时确定、更新、初始化和渲染地形和纹理数据
WorldWind实时确定.更新.初始化和渲染地形和纹理数据 当用户点击WorldWind中的地球时,首先响应的是WorldWindow.OnPaint()函数,后续程序的调用流程如下图所示. 零散知 ...
- python多进程共享变量Value使用tips
前言: 在使用tornado的多进程时,需要多个进程共享一个状态变量,于是考虑使用multiprocessing.Value(对于该变量的具体细节请查阅相关资料).在根据网上资料使用Value时,由于 ...
- Linux常用指令---tail | head(查看文件)
tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可以方便的查阅正在改变的日志文件,tail -f filename会把filename里最尾部的内容显示在屏幕上,并且不但刷新, ...