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 表单验证扩展(三)
Oct 20 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
js实现电灯开关效果
Jan 19 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 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
百度地图API使用方法详解
2015/08/25 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
Django的信号机制详解
2017/05/05 Python
python logging日志模块的详解
2017/10/29 Python
python实现简单登陆流程的方法
2018/04/22 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
python可视化实现KNN算法
2019/10/16 Python
Python Django view 两种return的实现方式
2020/03/16 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
新加坡交友网站:be2新加坡
2019/04/10 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
医院护士的求职信
2014/01/03 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
求职导师推荐信范文
2015/03/27 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
python爬取某网站原图作为壁纸
2021/06/02 Python
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis