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 相关文章推荐
ajax的hide隐藏问题解决方法
Dec 11 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 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添加MySQL数据记录代码
2008/06/07 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
幼儿园中班教师寄语
2014/04/03 职场文书
应聘英语教师求职信
2014/04/24 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
实习证明格式范文
2015/06/16 职场文书
葬礼主持词
2015/07/02 职场文书
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB