javascript jQuery 给人一种背景滚动较慢的印象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14187434/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery to give impression of background scrolling slower
提问by Tom
I have the following code which is just about working to give the impression of one div scrolling slower than the other, but there is a problem with the background div jolting a little when scrolling.
我有以下代码，它只是为了给人一种 div 滚动比另一个慢的印象，但是滚动时背景 div 有点晃动的问题。
Any ideas why this is happening and how I might be able to fix it?
任何想法为什么会发生这种情况以及我如何能够解决它？
EDIT: This doesn't appear to be a problem in all browsers, so I guess I'm now looking for a safer way of achieving this effect...
编辑：这在所有浏览器中似乎都不是问题，所以我想我现在正在寻找一种更安全的方式来实现这种效果......
<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>
采纳答案by Oliver Cooper
You are trying to achieve a 'parallax scrolling' effect. I recommend you take a look at a few articles such as this tutorialand this documentation. If you need any more help just ask, I've made a few site with this design.
您正在尝试实现“视差滚动”效果。我建议您查看一些文章，例如本教程和本文档。如果您需要更多帮助，请直接询问，我已经用这种设计制作了一些网站。
回答by Tom
I've kind of made a few changes to this myself and got it working smoother as I really don't need all the features in the plugin Oliver Cooper directed me too, although the plugin is probably the better option to allow more scope for future adaption.
我自己对此做了一些更改并使其工作更顺畅，因为我真的不需要 Oliver Cooper 也指导我的插件中的所有功能，尽管该插件可能是更好的选择，可以为未来留出更多空间适应。
Here's my improved code though.
不过，这是我改进的代码。
<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>
