我有以下问题.
我用这种结构建立了一个网站:
<section id="content">
...
</section>
<footer>
...
</footer>
Run Code Online (Sandbox Code Playgroud)
内容的背景图像设置为固定在底部.现在,当您向下滚动时,图像会在页脚后面滚动.为了防止这种情况,我写了一个简短的脚本,当页脚进入视图时自动设置附件滚动:
$(document).scroll(function () {
var curpos = $(window).scrollTop();
var fooOffset = $('#foot').offset();
var wh = $(window).height();
if(curpos >= (fooOffset.top-wh) && fix == 0) {
$('#content').css('background-attachment','scroll');
fix = 1;
} else if(curpos < (fooOffset.top-wh) && fix == 1){
$('#content').css('background-attachment','fixed');
fix = 0;
}
});
Run Code Online (Sandbox Code Playgroud)
这很好地解决了我的问题,几乎适用于所有浏览器.IE没问题,这次Chrome(WebKit一般来说,似乎)给我带来了问题.滚动到底部时,更改正常.当向上和向下滚动一点时,背景开始显示图形故障.当页脚返回到底部时,它再次看起来正常.
有人能帮助我吗?