jquery实现导航栏跟随窗口滚动
2016-06-22 16:58
597 查看
最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果。
smohan.fixednav.js
注: 由于jquery的1.9 以上的版本,不再支持 $.browser 方法。所以将原有插件中判断是否是IE6 的语句 $.browser.msie&&$.browser.version=="6.0" 改为 'undefined' == typeof(document.body.style.maxHeight)
使用方法:
1、(0,999)两个数值,第一个一个是设置在滚动时导航栏与顶部的距离,第二个是导航栏的zindex
2、mainavi 为导航栏的class
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 Dialog的关闭图标
- jQuery UI结合Ajax创建可定制的Web界面
- jquery select 选择器
- jQuery EasyUI table表单的数据绑定与交互
- jquery动态添加元素后, 该元素事件失效,可尝试原生 js写法解决
- jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
- jQuery-第1节-jQuery和DOM对象互相转化、选择器
- jquery如何获取用户表单提交值
- asp.net mvc基于jQuery+Ajax实现无刷新分页
- jQuery 操作元素
- 基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
- 浅析jQuery Ajax通用js封装
- jquery实现前台倒计时。应用下单24小时后自动取消该订单
- jquery的$.extend()、$.fn和$.fn.extend()
- jquery避免单双击事件冲突写法
- JQuery miscellany 整理
- jQuery如何用正则表达式验证手机号、身份证号、中文名称
- jquery 选择器 a 更多 简化
- 可模糊查询输入框(仿百度搜索栏)
- jQuery基础修炼圣典—事件篇