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 相关文章推荐
javascript 命名空间以提高代码重用性
Nov 13 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
javascript的this关键字详解
May 20 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
js实现二级联动简单实例
Jan 11 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实现两个数组相加的方法
2015/02/17 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
Python selenium的基本使用方法分析
2019/12/21 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
Pycharm Git 设置方法
2020/09/15 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
几款好用的python工具库(小结)
2020/10/20 Python
python 批量将中文名转换为拼音
2021/02/07 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
实习单位推荐信
2015/03/27 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
机械生产实习心得体会
2016/01/22 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
HTML中的表格元素介绍
2022/02/28 HTML / CSS