我想实现一个简单的视差效果,其中背景图像的滚动速度必须高于其上方的元素。如何使用JQuery或javascript实现此目的?
最佳答案
获取页面滚动的当前位置,然后乘以您喜欢的比率。然后将背景的位置更改为结果编号:
$(document).ready(function(){
var yOffset;
$(window).scroll(function(){
yOffset=$(window).scrollTop()*10;
$("body").css('background-position', '0px '+-yOffset+'px');
})
})
body{
background:url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
height:4000px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
</div>