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 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
Angular2数据绑定详解
Apr 18 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 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生成略缩图代码
2012/07/16 PHP
PHP精确计算功能示例
2016/11/29 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
python Matplotlib模块的使用
2020/09/16 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
教师个人自我鉴定
2014/02/08 职场文书
后备干部考察材料
2014/02/12 职场文书
新品发布会策划方案
2014/06/08 职场文书
2016新年慰问信范文
2015/03/25 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
高中运动会广播稿
2015/08/19 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
无线电通信名词解释
2022/02/18 无线电