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>