3

我有以下代码，它只是为了给人一种 div 滚动比另一个慢的印象，但是背景 div 在滚动时有点摇晃。

任何想法为什么会发生这种情况以及我如何能够解决它？

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

http://jsfiddle.net/KRv5V/

<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>
4

2 回答 2

3

我自己对此进行了一些更改并使其运行更顺畅，因为我真的不需要 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>
于 2013-01-09T10:38:35.873 回答
2

您正在尝试实现“视差滚动”效果。我建议您查看一些文章，例如本教程和本文档。如果您需要更多帮助，请询问，我已经用这种设计制作了一些网站。

于 2013-01-06T22:40:59.213 回答