如何使页面显示效果与jquery滚动

Question

我试图通过滚动在我的网页上显示效果，并在第一层上运行良好。但是在前层完成滚动后，它有点混淆效果层。

前层完成滚动后如何继续显示图层？ 任何建议都会很棒，谢谢

$(document).ready(function(){
	
	$(window).on('scroll', function(){
		var wHeight = $(window).height();
		var scrollTop = $(window).scrollTop();
		$('.box3').css('transform','translateY(-'+ scrollTop +'px)');
		if(scrollTop > 700){
			$('.box2').css('transform','translateY(-'+ scrollTop-wHeight +'px)');
		}
	});
	
});

.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">
	<div class="box box1"><p>box1</p></div>
	<div class="box box2"><p>box2</p></div>
	<div class="box box3"><p>box3</p></div>
</div>
<div class="content">
	
</div>

Answer 1

您缺少括号，只需更改：

$('.box2').css('transform','translateY(-'+ scrollTop-wHeight +'px)');

到

$('.box2').css('transform','translateY(-'+ (scrollTop-wHeight) +'px)');

你很好。