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 文本框使用小结
May 22 Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
js中开关变量使用实例
Feb 24 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
原生JavaScript实现换肤
Feb 19 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操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
让你的网站可编辑的实现js代码
2009/10/19 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
下载糗事百科的内容_python版
2008/12/07 Python
在Django中创建动态视图的教程
2015/07/15 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
Django stark组件使用及原理详解
2019/08/22 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
python 追踪except信息方式
2020/04/25 Python
工商技校毕业生自荐信
2013/11/15 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
表彰大会主持词
2014/03/26 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
作风整顿剖析材料
2014/09/30 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS