0
我试图使滚动显示效果在我的网上，并在第一层上运行良好。但是在前一层完成滚动之后，它有点让人困惑，从而使效果层落后。如何使页面显示效果滚动与jquery
如何在前一层完成滚动后继续显示图层？ 任何建议将是巨大的，谢谢
$(document).ready(function(){
\t
\t $(window).on('scroll', function(){
\t \t var wHeight = $(window).height();
\t \t var scrollTop = $(window).scrollTop();
\t \t $('.box3').css('transform','translateY(-'+ scrollTop +'px)');
\t \t if(scrollTop > 700){
\t \t \t $('.box2').css('transform','translateY(-'+ scrollTop-wHeight +'px)');
\t \t }
\t });
\t
});.boxWrapper {
position: fixed;
overflow: hidden;
background-color: #fafafa;
width: 100%;
height: 100vh;
}
.boxWrapper p{
position: absolute;
bottom: 0;
left: 0;
font-size: 20px;
color: #fff;
}
.box{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.box1{
background-color: #f00;
}
.box2{
background-color: #0f0;
}
.box3{
background-color: #00f;
}
.content {
height: 3000px;
background-color: #e6e6e6;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxWrapper">
\t <div class="box box1"><p>box1</p></div>
\t <div class="box box2"><p>box2</p></div>
\t <div class="box box3"><p>box3</p></div>
</div>
<div class="content">
\t
</div>