很多时候,界面上需要一个固定位置的块,不论页面怎么滚动,始终停在它的位置,比如“返回顶部”、“给建议”、“分享按钮”、“广告”等等。css中有position: fixed;可以直接用,很方便,但是万恶的IE6却不支持,下面讲两种方法解决这个问题。
如何解决“振动”的问题?
方法一:
- *html {/* 只有IE6支持 */
- background-image: url(about:blank); /* 使用空背景 */
- background-attachment: fixed; /* 固定背景 */
- }
- #box {
- /* 非IE6浏览器使用固定元素 */
- position: fixed;
- top: 0;
- left: 0;
- /* IE6改为绝对定位,并通过css表达式根据滚动位置更改top的值 */
- _position: absolute;
- _top: expression(eval(document.documentElement.scrollTop));
- }
这个方法要注意的是,*html使用固定位置空背景目的是解决滚动的时候抖动的问题,原理是这样,滚动页面浏览器重新计算出网页,然后执行css,所以固定元素产生延迟的抖动,使用固定背景之后,在滚动的时候先执行了css,再重新计算网页,所以没有抖动问题了。
document.documentElement.scrollTop是滚动条偏移的值,可以根据这个来设置位置,比如document.documentElement.scrollTop+200或者使用margin定位也行。
方法二:纯css的解决方法
- html { _overflow: hidden; }
- body { _height: 100%; _overflow: auto; }
- .box {
- position: fixed;
- left: 10px;
- top: 180px;
- _position: absolute;
- }
原理很简单,滚动条是body的滚动,固定元素是相对body定位,那么把它设置窗口那么高,不就一直是在窗口那个位置了?
方法三:js解决
这种方法是最古老的一种方法,但我不喜欢这个方法,除非在特定效果里需要js才会用,不然不建议加载不必要的js!这个方法就不详细说了,网上一大堆,去度娘一下^
最后,我选择的是方法一。
虽然第二种看起来简单,但是我想直接设置了html或者body的height和overflow可能会带来未知的界面bug,不太敢用。第一种方法感觉安全一些,而且可以查看淘宝网,也是用的第一种方法。