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 $.each的用法说明
Mar 22 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
JS实现520 表白简单代码
May 21 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 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/12/21 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
文本链接逐个出现的js脚本
2007/12/12 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Python zip()函数用法实例分析
2018/03/17 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
python中下标和切片的使用方法解析
2019/08/27 Python
keras输出预测值和真实值方式
2020/06/27 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
JDK安装目录下有哪些内容
2014/08/25 面试题
论群众路线学习笔记
2014/11/06 职场文书
经典爱情感言
2015/08/03 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
PyTorch的Debug指南
2021/05/07 Python
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android