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 相关文章推荐
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
js实现弹窗效果
Aug 09 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使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
Javascript----文件操作
2007/01/18 Javascript
dwr spring的集成实现代码
2009/03/22 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
js实现动态时钟
2020/03/12 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
浅谈python标准库--functools.partial
2019/03/13 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
html5唤起app的方法
2017/11/30 HTML / CSS
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
民族团结先进个人材料
2014/02/05 职场文书
元旦联欢会主持词
2014/03/26 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
鼓舞士气的口号
2014/06/16 职场文书
2014年营销工作总结
2014/11/22 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书