我有以下代码，它只是为了给人一种 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>
最佳答案
我自己对此做了一些更改并让它工作得更顺畅，因为我真的不需要 Oliver Cooper 指导我的插件中的所有功能，尽管插件可能是允许更多功能的更好选择 future 适应的范围。
不过，这是我改进后的代码。
<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>
关于javascript - jQuery 给人以背景滚动速度较慢的印象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14187434/