我有一个标题，它将是视口高度的两倍。当它到达标题的末尾时，我做了一个简单的视差效果然后显示下面的内容，但是，当你滚动时，内容是轻弹（我猜是因为它已经计算了滚动并用css调整风格“上：xxx”）。有没有人对如何解决这个问题有任何想法，或者有任何具有类似功能的教程？
$(window).scroll(function(e){
var scroll = $(window).scrollTop();
var h = $(window).height()*2;
if (scroll < h){
$('#wrapper').css({'top':scroll })
}
});#top {
width:100%;
position:absolute;
left:0;
z-index:99;
top:0;
height: 200vh;
background: red;
}
#wrapper {
position:Relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top"></div>
<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
答案 0 :(得分：0)
我在Chrome中看到你在Mac上讨论的问题。
你可以修复＆＃34;口吃＆＃34;用：
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
您的代码实现了新的代码行：
$(window).scroll(function(e){
var scroll = $(window).scrollTop();
var h = $(window).height()*2;
if (scroll < h){
$('#wrapper').css({'top':scroll })
}
});#top {
width:100%;
position:absolute;
left:0;
z-index:99;
top:0;
height: 200vh;
background: red;
}
#wrapper {
position:Relative;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top"></div>
<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>