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,超强推荐expand.js
Dec 23 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
Javascript中神奇的this
Jan 20 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
js实现蒙版效果
Jan 11 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/03/20 PHP
php 禁止页面缓存输出
2009/01/07 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
JS的replace方法详细介绍
2012/11/09 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
利用Python获取操作系统信息实例
2016/09/02 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
python3.7 的新特性详解
2019/07/25 Python
详解python pandas 分组统计的方法
2019/07/30 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
主管职责范文
2013/11/09 职场文书
社区食品安全实施方案
2014/03/28 职场文书
安全责任协议书范本
2016/03/23 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS
Python如何加载模型并查看网络
2022/07/15 Python