手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript ie6兼容position:fixed实现思路
javascript ie6兼容position:fixed实现思路
摘要:positon:fixed让HTML元素脱离文档流固定在浏览器的某个位置网页中经常会有浮动的导航条会用到这种定位模式,但是ie6下并不兼容这...

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 ie6兼容position:fixed实现思路】相关文章:

javascript实现树形菜单的方法

javascript实现简单的进度条

JavaScript function函数种类详解

javascript用函数实现对象的方法

javascript实现链接单选效果

javascript实现控制的多级下拉菜单

javascript自定义右键弹出菜单实现方法

javascript瀑布流布局实现方法详解

JavaScript Base64编码和解码,实现URL参数传递。

javascript实现表格增删改操作实例详解

精品推荐
分类导航