头部固定

完美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层宽度*/ }