Question

我有以下问题。

我建立了一个这种结构的网站：

<section id="content">
...
</section>
<footer>
...
</footer>

内容的背景图像设置为固定在底部。现在，当您向下滚动时，图像会在页脚后面滚动。为了防止这种情况，我写了一个简短的脚本，当页脚进入视图时自动设置附件滚动：

$(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;
    }
});

这很好地解决了我的问题，几乎适用于所有浏览器。 IE没问题，这次Chrome（WebKit一般来说，似乎）给我带来了问题。滚动到底部时，更改正常。当向上和向下滚动一点时，背景开始显示图形故障。当页脚返回到底部时，它看起来再次正常。

有人能帮助我吗？

Answer 1

我在一个网站上遇到过类似的问题。但我找到了解决方案。

尝试使用 -webkit-transform css属性。

见下面的代码

#mainBg {
    background:#F1F3F4 url(img/background2.jpg) center top no-repeat scroll;
    width:100%;
}

#mainBg.bottomFixed {
    background:#F1F3F4 url(img/background2.jpg) center bottom no-repeat fixed;
    -webkit-transform: rotate(0deg);
}

PS。抱歉我的英文。

滚动时更改背景附件会导致WebKit中出现图形故障

1 个答案: