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 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
实例解析Array和String方法
Dec 14 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 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
咖啡豆分级制度 咖啡豆等级分类 咖啡豆是按口感分类的吗?
2021/03/05 新手入门
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Python排序算法实例代码
2017/08/10 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
python argparser的具体使用
2019/11/10 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
UNIX文件类型
2013/08/29 面试题
商务英语专业毕业生自荐信
2013/11/05 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
家长学校教学计划
2015/01/19 职场文书
我是特种兵观后感
2015/06/11 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
MySQL索引是啥?不懂就问
2021/07/21 MySQL
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python