首页 > 代码库 > 浮动层固定兼容IE6 position:fixed的最佳解决方案
浮动层固定兼容IE6 position:fixed的最佳解决方案
第一种:css方法
有时候当我们需要把一个元素固定在页面的某个部位,一般都是用css中的“position:fixed;”方法来解决,但是IE6不支持fixed,所以今天分享一个兼容IE6的页面底部固定层CSS代码。如下:
.bottom{bottom:0;position:fixed;height:23px;line-height:23px;width:100%;z-index:999;_bottom:auto;_width:100%;_position:absolute;//_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}_top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);/* for IE6 ,执行JS语句,documentElement即html对象,clientHeight即可视窗口高度,offsetHeight即浮动层高度(包括border边框厚度),scrollTop即滚动条滚动过的页面高度 */
需要注意的是:使用以上代码后在ie中你会发现被固定定位的元素在滚动滚动条的时候会闪动,下面给出解决方法:
//body{background:url(notfound)fixed;}body{background-image:url(text.txt); /*for IE6,也可以用一张图片URL,是否存在这文件无所谓*/background-attachment:fixed; /* 这句是关键之一:一定要fixed,不能用scroll */
第二种:css方法
body{margin:0;}#test{display:block; bottom:3px; right:3px; width:130px; position:fixed;}/* 以下是写给IE6的 */* html body{height:100%; overflow-y:auto;}* html #test{position:absolute; right:18px;}* html{overflow-x:auto; overflow-y:hidden;}
原理:
1、position定位,如果前面的父元素都没有position的话,那么该position定位元素是相对于html的,
注意!是相对html,而不是body
2、html滚动条隐藏,使用body滚动条overflow:auto模拟html滚动条。
3、body层高度100%,当html不设置height高度的时候,除了IE6外,body处的百分比高度是无效的(这算是利用了IE6的bug吧!)
第三种:jQuery方法
var otop = $("#sub_nav").offset().top; $(window).scroll(function(){ var scroll_top = parseInt($(window).scrollTop()); if( scroll_top > otop ){ if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) { $("#sub_nav").css({position:"absolute", top:$(window).scrollTop()+"px"}); }else{ $("#sub_nav").css({position:"fixed", top:"0px"}); } }else{ $("#sub_nav").css({position:"static", top:""}); } });
上面的sub_nav是一个层,随着页面向下滚动,当此水平条接触浏览器的上边缘时,水平条独立出来,不跟随滚动条滚动了
第四种:插件方法
jquery插件:任意位置浮动固定层(09-11-05更新插件)
演示地址
第五种:js函数
<div class="float" id="float"> 我是个腼腆羞涩的浮动层… </div>var $smartFloat = function(elements) {var position = function(element) {var top = element.getPosition().y, pos = element.getStyle("position");window.addEvent("scroll", function() {var scrolls = this.getScroll().y;if (scrolls > top) {if (window.XMLHttpRequest) {element.setStyles({position: "fixed",top: 0});} else {element.setStyles({top: scrolls});}}else {element.setStyles({position: "absolute",top: top});}});};if ($type(elements) === "array") {return elements.each(function(items) {position(items);});} else if ($type(elements) === "element") {position(elements);}};//绑定$smartFloat($("float"));
浮动层固定兼容IE6 position:fixed的最佳解决方案
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。