Question

我有以下代码，只是为了给人一种div滚动比另一种更慢的印象，但滚动时背景div抖动有问题。

为什么会发生这种情况以及如何解决这个问题？

编辑：这在所有浏览器中似乎都不是问题，所以我想我现在正在寻找一种更安全的方法来实现这种效果......

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready( function() {
    $(window).scroll(function() {
      var scrollTop = $(window).scrollTop();
      var divam = 1.2;
      $(".sky").css({
          "top":scrollTop/divam+"px",
          "height":10000-(Math.round(scrollTop/divam))+"px"
      });
    });
});
</script>

<style type="text/css">
.sky {
    height:10000px; 
    width:100%; 
    position:absolute; 
    top:0px; 
    left:0px; 
    background-image:url(http://library.thinkquest.org/06aug/02339/clouds45.jpg); 
    z-index:1;
}

.red {
    height:10000px; 
    width:50%; 
    position:absolute; 
    top:0px; 
    right:25%; 
    background-image:url(http://www.charting-sustainability.org/writings/culture/red/red-pirate.jpg); 
    z-index:2; 
    background-position:center;
}
</style>

</head>

<body>

<div class="sky"></div>
<div class="red"></div>

</body>

Answer 1

我自己做了一些改动并让它工作更顺畅，因为我真的不需要插件中的所有功能Oliver Cooper也指导我，虽然插件可能是更好的选择，允许更多未来适应的范围。

这是我改进的代码。

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready( function() {
    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        var divam = 20;
        $("body").css({
            "background-position":"0px -"+scrollTop/divam+"px"     
        });
        $(".red").css({
            "margin-top":"-"+scrollTop+"px"
        });
    });
});
</script>

<style type="text/css">
    body {
        background-image:url(http://library.thinkquest.org/06aug/02339/clouds45.jpg);
        background-attachment: fixed;
        height:21000px;
    }

    .red {
        height:10000px; 
        width:50%; 
        position:fixed;
        top:400px;
        left:25%;
        background-image:url(http://www.charting-sustainability.org/writings/culture/red/red-pirate.jpg); 
        background-position:center;
        border-bottom:10px solid #000;
    }
</style>

</head>

<body>

    <div class="sky"></div>
    <div class="red"></div>

</body>

Answer 2

您正在尝试实现“视差滚动”效果。我建议您查看一些文章，例如this tutorial和this documentation。如果您需要更多帮助，请问我已经使用此设计制作了一些网站。

jQuery让背景滚动的印象变慢

2 个答案: