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动画(animate)简单引擎代码示例
Dec 04 Javascript
论JavaScript模块化编程
Mar 07 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
JS实现点餐自动选择框(案例分析)
Dec 10 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边学边教》(01.开篇――准备工作)
2006/12/13 PHP
PHP语法速查表
2007/01/02 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
php二维码生成以及下载实现
2017/09/28 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
如何在PHP中生成随机数
2020/06/04 PHP
js日期相关函数总结分享
2013/10/15 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
js实现简单页面全屏
2019/09/17 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
Python解释执行原理分析
2014/08/22 Python
python杀死一个线程的方法
2015/09/06 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
python中如何进行连乘计算
2020/05/28 Python
python实现数字炸弹游戏程序
2020/07/17 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
Linux如何为某个操作添加别名
2013/03/01 面试题
路政管理专业个人自荐信范文
2013/11/30 职场文书
认识实习感想
2015/08/10 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
mysql 带多个条件的查询方式
2021/06/05 MySQL
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript