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

Question

我正在尝试通过滚动在我的网站上显示效果，并且它在第一层上运行良好。但是在 front layer 完成滚动后将 effect layer 放在后面有点令人困惑。

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

$(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)');

你很好。