javascript ie6兼容position:fixed实现思路


Posted in Javascript onApril 01, 2013

positon:fixed 让HTML元素脱离文档流固定在浏览器的某个位置
网页中经常会有浮动的导航条会用到这种定位模式,但是ie6下并不兼容这种定位
浮动导航条的样式,重要的是position:fixed;bottom:60px;(浮动导航底部距离窗口底部60px)

.floating_9677{position:fixed; z-index:961; bottom:60px;}

ie6下positon:fixed不起作用,只能靠js来实现了,首先在ie6下需要将position设置为absolute
position:fixed;bottom:60px;_position:abosulte;

给浮动元素加一个属性标识,js通过这个属性能找到这些浮动元素。tag="floatNavigator"
工作中浮动导航条主要通过top或者bottom来定位。
//ie6兼容position:fixed 
function fixedPositionCompatibility(){ 
//判断是否ie6浏览器 
if( $.browser.msie || parseInt($.browser.version,10) <= 6){ 
var vavigators = $("[tag='floatNavigator']"); 
if(!navigators.length)return; 
//判断每个浮层是靠顶部固定还是底部固定 
$.each(navigators, function(){ 
this.top = $(this).css("top"); 
this.bottom = $(this).css("bottom"); 
this.isTop = this.top == "auto" ? false : true; 
}); 
window.attachEvent("onscroll", function(){ 
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
$.each(navigators, function(){ 
this.style.top = this.isTop ? scrollTop + parseInt(this.top) + "px" : scrollTop + $(window).height() - $(this).outerHeight() - parseInt(this.bottom) + "px"; 
}); 
}); 
} 
}
Javascript 相关文章推荐
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
js中this的指向问题归纳总结
Nov 28 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 Javascript
详解Node.JS模块 process
Aug 31 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 #Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 #Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 #Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 #Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 #Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 #Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 #Javascript
You might like
PHP安全下载文件的方法
2016/04/07 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
pandas的qcut()方法详解
2019/07/06 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
如何将json数据转换为python数据
2020/09/04 Python
python中的unittest框架实例详解
2021/02/05 Python
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
Structs界面控制层技术
2013/10/11 面试题
应届生幼儿园求职信
2013/11/12 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记