IE6的position:fixed F

网站的顶部导航栏需要固定到顶部,并且不随滚动条的滚动而移动,就是传说中的position:fixed啦,但ie6不兼容,因此有了此篇。

Google搜一下,应该有许多关于fixed的解决了方案了,自己也看了很多,很多都是相互的复制粘贴了一下。但其中还是有几篇不错的。

在这里,根据个人的理解及实践来总结一下。

1、CSS表达式及JS

解决fixed问题,最多的文章都是说通过expression表达式,尽管expresssion表达式有很大的性能问题(详细的可以看看这篇),但这也是一种解决方案。

在讲解表达式之前,必须知道js中documentElement(html标签)几个相关的属性,如下图

该图是我用office画的一张简易图,淡紫色的文档,蓝色的为浏览器,红色为浮动的元素。

如果设置top或者left时,很简单使用document.documentElement.scrollTop+N和document.documentElement.scrollLeft+N即可,同时笔者发现,如果在水平方向没有出现滚动条,直接使用left:length即可,不必借助document。

但是设置right或bottom时就不行了,因为没有scrollbottom和scrollright,在这里可以借助top和left,以right为例,

_left:expression(eval(document.documentElement.scrollLeft+document.documentElement.offsetWidth-this.offsetWidth));当如此设置后,元素将

紧贴在有边框上,如果想要添加一定的间距可以在减去N(即document.documentElement.scrollLeft+document.documentElement.offsetWidth-this.offsetWidth-N)。

这里可能和很多网上的不一样,网上的很多还减去了parseInt(this.currentStyle.marginLeft)、parseInt(this.currentStyle.marginRight),这里就需要理解这两句的含义了,这两句是通过currentStyle获得最后的样式边距,但一般设置fixed后,很少再使用margin了,所以这里是多余,我测试后,去掉后仍然有效。但如果你想设置margin就应该使用这两属性了。

另外使用表达式时,元素会抖动,可以通过设置

html,body{
_background-image: url(about:blank);
_background-attachment:fixed;

}

来解决。

(bottom同理)

2、使用纯CSS

之前我一篇介绍html,body的,在看这个方法时,建议去看看那篇,有助于理解。

fixed元素的绝对位置是相对于HTML元素来说,滚动条是body元素的。

我们拉动滚动条的时候,内容都会随着窗口滚动;这时滚动的是body。如果让绝对定位的父级元素定为body,刚我们需要固定的某个模块将会固定在网页的某个位置,而不是固定在窗口的某个位置


我们需要做的是,让body保持其原有高度,让html只有一个窗口那么高。代码我们可以这


html{overflow:hidden;} 
body{height:100%;overflow:auto;}
原文地址:https://www.cnblogs.com/sourcebank/p/3009879.html