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 选择器 xpath 语法应用
May 13 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 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/06 PHP
php 引用(&amp;)详解
2009/11/20 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
文字幻灯片
2006/06/26 Javascript
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
2010/09/01 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
python3 与python2 异常处理的区别与联系
2016/06/19 Python
Django验证码的生成与使用示例
2017/05/20 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
python如何快速拼接字符串
2020/10/28 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
中国最大的团购网站:聚划算
2016/09/21 全球购物
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
一道SQL面试题
2012/12/31 面试题
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
运动会广播稿500字
2014/01/28 职场文书
小摄影师教学反思
2014/04/27 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
护士找工作求职信
2014/07/02 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
2014年维稳工作总结
2014/11/18 职场文书
道德与公民自我评价
2015/03/09 职场文书
地道战观后感500字
2015/06/04 职场文书
如何用python绘制雷达图
2021/04/24 Python
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python