[原创]jquery实现导航栏跟随窗口滚动 原创_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 3291 | 回复: 0   主题: [原创]jquery实现导航栏跟随窗口滚动 原创        上一篇   下一篇 
panpan.nie
注册用户
等级:大校
经验:4754
发帖:217
精华:2
注册:1970-1-1
状态:离线
发送短消息息给panpan.nie 加好友    发送短消息息给panpan.nie 发消息
发表于: IP:您无权察看 2016-6-22 16:57:10 | [全部帖] [楼主帖] 楼主

最近在制作一个模版的时候用到的一个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



该贴被panpan.nie编辑于2016-6-22 16:57:48



赞(1)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论