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 ...
随机推荐
- 分层图+最短路算法 BZOJ 2763: [JLOI2011]飞行路线
2763: [JLOI2011]飞行路线 Time Limit: 10 Sec Memory Limit: 128 MB Description Alice和Bob现在要乘飞机旅行,他们选择了一家相 ...
- fullpage.js 结合固定导航栏—实现定位导航栏
开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...
- js统计字符串中各种字符情况
问题描述:在一个字符串中,统计出大写字母.小写字母.数字和其他字符各数.这个算法以前在学习java的时候,老师说过,而且说了四种算法.在孔乙己的世界里,茴香豆的"茴"字有四种写法嘛 ...
- leetcode-Single NumberII
https://leetcode.com/problems/single-number-ii/ 很无耻的又一次使用了黑暗料理... class Solution: # @param {integer[ ...
- SPOJ AMR10E Stocks Prediction --二分求和+矩阵快速幂
题意:给一个递推式S(n) = a1*S(n-1)+...+aR*S(n-R),要求S(k)+S(2k)+...+S(nk)的值. 分析:看到n的大小和递推式,容易想到矩阵快速幂.但是如何转化呢? 首 ...
- 我的Unity学习路线
前言 上班的时间内都很忙在做项目,休息时间里闲下来了,却觉得没什么事做不自在.难道真是苦逼的命不会享受? 想了一下这一段时间以来的过程:先是重新看了一遍Unity的基础部分,然后买了<3D数学基 ...
- 谁可以说出HashMap和HashSet的相同点和不同点。
谁可以说出HashMap和HashSet的相同点和不同点. 2011-11-15 20:46ruoshui_t | 浏览 20310 次 Perl 2011-11-15 21:17 #知道行家专业创 ...
- [转]仿World Wind构造自己的C#版插件框架——WW插件机制精简改造
很久没自己写东西啦,早该好好总结一下啦!一个大师说过“一个问题不应该被解决两次!”,除了一个好脑筋,再就是要坚持总结. 最近需要搞个系统的插件式框架,我参照World Wind的插件方式构建了个插件框 ...
- JS 之BOM
BOM的核心对象是window,表示浏览器的一个实例. 使用框架时,window.top对象指顶层框架,也就是浏览器窗口.window.parent对象指包含当前窗口的框架,也就是父框架.window ...
- 用postgreSQL做基于地理位置的app(zz)
前言:项目中用到了postgreSQL中的earthdistance()函数功能计算地球上两点之间的距离,中文的资料太少了,我找到了一篇英文的.讲的很好的文章,特此翻译,希望能够帮助到以后用到eart ...