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实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
May 26 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 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 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
layui表格数据重载
2019/07/27 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
利用django如何解析用户上传的excel文件
2017/07/24 Python
python检索特定内容的文本文件实例
2018/06/05 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
影视动画专业个人的自我评价
2013/12/31 职场文书
材料会计岗位职责
2014/03/06 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android