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实现日期加减的方法
Nov 29 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
详解react服务端渲染(同构)的方法
Sep 21 Javascript
深入解析ES6中的promise
Nov 08 Javascript
javascript的var与let,const之间的区别详解
Feb 18 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实现用户认证及管理完全源码
2007/03/11 PHP
php microtime获取浮点的时间戳
2010/02/21 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python实现rest请求api示例
2014/04/22 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
详解Python3的TFTP文件传输
2018/06/26 Python
python logging日志模块原理及操作解析
2019/10/12 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
CSS3 简写animation
2012/05/10 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
应聘教师推荐信
2013/10/31 职场文书
2014植树节活动总结
2014/03/11 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
幼师求职自荐信
2015/03/26 职场文书
宣传委员竞选稿
2015/11/19 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
2016年少先队活动总结
2016/04/06 职场文书
怎样写工作总结啊!
2019/06/18 职场文书