jquery实现的让超出显示范围外的导航自动固定屏幕最顶上


Posted in Javascript onSeptember 22, 2011

其实实现起来并不难,我们先把实现流程大致想一下,首先,如果导航在显示范围内,就不用做修改。当导航超出显示范围,也就是导航距离屏幕顶部的距离小于0的时候,我们要让它浮动在屏幕顶上,然后大于0的时候,进行一个复原操作,原理就是这么简单,大致看下效果图吧
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上

$().ready(function(){ 
//导航距离屏幕顶部距离 
var _defautlTop = $("#navigator").offset().top - $(window).scrollTop(); 
//导航距离屏幕左侧距离 
var _defautlLeft = $("#navigator").offset().left - $(window).scrollLeft(); 
//导航默认样式记录,还原初始样式时候需要 
var _position = $("#navigator").css('position'); 
var _top = $("#navigator").css('top'); 
var _left = $("#navigator").css('left'); 
var _zIndex = $("#navigator").css('z-index'); 
//鼠标滚动事件 
$(window).scroll(function(){ 
if($(this).scrollTop() > _defautlTop){ 
//IE6不认识position:fixed,单独用position:absolute模拟 
if($.browser.msie && $.browser.version=="6.0"){ 
$("#top").css({'position':'absolute','top':eval(document.documentElement.scrollTop),'left':_defautlLeft,'z-index':99999}); 
//防止出现抖动 
$("html,body").css({'background-image':'url(about:blank)','background-attachment':'fixed'}); 
}else{ 
$("#navigator").css({'position':'fixed','top':0,'left':_defautlLeft,'z-index':99999}); 
} 
}else{ 
$("#navigator").css({'position':_position,'top':_top,'left':_left,'z-index':_zIndex}); 
} 
}); 
});

没有太多好讲的,需要注意的一点就是,IE6不认识position:fixed,需要用position:absolute去模拟,然后实时计算出top的值,另外需要给html和body加两个样式,防止滚动的时候出现抖动,具体可以了解《完美解决IE6不支持position:fixed的bug》。

另外需要注意的一点就是,导航的宽度必须是固定值,不能是auto或者100%因为fixed和absolute都不认识,当然你也可以手动获取到导航的宽度,然后写到浮动导航样式里,不过有个前提,导航原先样式里不能有:position:relative,情况可能比较多,最简单的方法还是把导航宽度定死。

以上代码可以复制复制到后台设置的HTML页脚代码里,如果遇到浮动导航宽度出问题了,就参考我刚才做的处理办法解决吧。

Javascript 相关文章推荐
js url传值中文乱码之解决之道
Nov 20 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
angular动态表单制作
Feb 23 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 #Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 #Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 #Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 #Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 #Javascript
Dom操作之兼容技巧分享
Sep 20 #Javascript
js获取图片大小的函数代码
Sep 20 #Javascript
You might like
PHP $_SERVER详解
2009/01/16 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
Js callBack 返回前一页的js方法
2008/11/30 Javascript
Javascript 入门基础学习
2010/03/10 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
python中实现定制类的特殊方法总结
2014/09/28 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
python之Character string(实例讲解)
2017/09/25 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
浅谈Python的list中的选取范围
2018/11/12 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
大客户销售经理职责
2013/12/04 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
食堂标语大全
2014/06/11 职场文书
村级个人对照检查材料
2014/08/22 职场文书
婚宴新娘致辞
2015/07/28 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript