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 29 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
javascript判断office版本示例
Apr 11 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
vue实现简单图片上传
Jun 30 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中的加密功能
2006/10/09 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
php实现字符串翻转的方法
2015/03/27 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
Javascript中的 “&amp;” 和 “|” 详解
2017/02/02 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
python中的一些类型转换函数小结
2013/02/10 Python
python三元运算符实现方法
2013/12/17 Python
python实现文件分组复制到不同目录的例子
2014/06/04 Python
python中threading超线程用法实例分析
2015/05/16 Python
Python 中 Meta Classes详解
2016/02/13 Python
python实现远程控制电脑
2019/05/23 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
银行优秀员工事迹
2014/02/06 职场文书
环保倡议书100字
2014/05/15 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
放假通知范文
2015/04/14 职场文书
绿里奇迹观后感
2015/06/15 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android