完美position:fixed 兼容各种浏览器 解决长页面fixed无法向下滚动
发布日期:2012-10-31
前段时间做某个项目时,要求滚动条滚动时网页背景滚动,而网站内容保持不动,于是只有使用position:fixed,但有两个问题:一、IE6不支持position:fixed;二、使用position:fixed后,如果页面内容高度超过一个屏幕,无法向下滚动。本文就是来探讨这两个问题的解决方法。
一、首先解决position:fixed后无法向下滚动问题,当然这个问题在IE6下不会出现了,以下是解决方法代码:
- .main { position:fixed; width:1002px; }
接下来需要js支持,我现在默认用jquery框架:
- if ( ! ( !-[1,] && !window.XMLHttpRequest ) ) { //非IE6浏览器
- $('.main').css( 'left', ( $(window).width() - 1002 ) / 2 );
- $(window).scroll(function(){
- $('.main').css( 'top', 0 - $(window).scrollTop() );
- });
- }
这里使用了JS,不知道如果嵌套层能否不使用JS,我就没有再试了,反正已经达到了客户的要求。
至于为什么没有使用position:absolute然后滚动时用JS控制.main层的位置,是因为,position:absolute后JS控制位置会产生抖动,而fixed不会抖动。
二、解决IE6不支持position:fixed问题,我们可以用position:absolute来代替,以下是完美解决方法代码:
- body { background-image:url(ahibw.com); background-attachment:fixed;
- /*解决IE6 position:absolute抖动*/ }
- .main { _position:absolute;
- _left:expression(documentElement.scrollLeft +
- (documentElement.clientWidth - 1002) / 2);
- /*让.main层在屏幕中间,其中的1002是.main层宽度*/ }