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 相关文章推荐
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
mpvue将vue项目转换为小程序
Sep 30 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
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中的boolean(布尔)类型详解
2013/10/28 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
python实现基于SVM手写数字识别功能
2020/05/27 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
行政总监岗位职责
2013/12/05 职场文书
中国文明网签名寄语
2014/01/18 职场文书
教师师德承诺书
2014/03/26 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
见习期个人总结
2015/03/05 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
银行资信证明
2015/06/17 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
使用python绘制横竖条形图
2022/04/21 Python
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android