Question

基本上，我试图通过基于滚动的距离设置div的背景位置来实现视差效果。这在Firefox中完美运行，但看起来基于webkit的浏览器不起作用。也就是说所有其他浏览器都没有为正文的scrollTop（）返回值。我尝试了'文档'，'窗口'，'正文，html'等但没有其他工作。

这是小提琴：http://jsfiddle.net/7WVc4/

这是JS：

$(document).ready(function(){
    $('body').scroll(function(){
        var scrolled = $('body').scrollTop();
        scrolled*=-0.4;
        $('#container').css('background-position','0px ' + scrolled + 'px');  
    });
});

HTML：

<div id='container'></div>

CSS：

#container {
    background-image:url('http://subtlepatterns.com/patterns/food.png');
    background-attachment: fixed;
    width:80%;
    margin:auto;
    height:1000px;
}

Answer 1

这应该这样做：

$(document).ready(function(){
    $(window).scroll(function(){
        var scrolled = $(document).scrollTop();
        scrolled*=-0.4;
        $('#container').css('background-position','0px ' + scrolled + 'px');  
    });
});

这是一个例子，显示它是最基本的形式： http://labs.funkhausdesign.com/examples/parallax/basic/index.html

它适用于Chrome 32 +，Firefox 26+和Safari 7 +。

Answer 2

替代答案。 Fiddle

$(document).ready(function(){
    $(document).on("scroll", function () {
        var scrolled = $('body').scrollTop();
        scrolled*=-0.4;
        $('#container').css('background-position','0px ' + scrolled + 'px');  
    });
});

scrollTop仅适用于Firefox

2 个答案: