【jQuery】スクロールに合わせて表示する

スクロール時にコンテンツがふわっと出てくる感じきれいに見えますよね。
今回はスクロールに合わせてコンテンツを表示させる方法をまとめます。
先日実装する機会がありましたので、備忘録的にまとめておきます。
完成形
こんな感じになります。
HTML,CSS部
<div class="container" style="background-color:#ccc"></div><div class="container"><div class="box" id="box1">box1</div><div class="box" id="box2">box2</div><div class="box" id="box3">box3</div><div class="box" id="box4">box4</div></div>
今回はボックス4つを順番に表示させますので箱4つ用意してます。
それぞれの箱をあらかじめ下に用意しておいて表示したときに、上に登ってくるようにしておきます。
.active {opacity: 1;transform: translateY(0vh);}
「active」クラスはJavaScriptの付与するためのものです。
可視化して下に用意していたものをもとの高さまで戻しています。
JavaScript部
window.addEventListener("scroll", function() {var box1 = document.getElementById("box1");var box2 = document.getElementById("box2");var box3 = document.getElementById("box3");var box4 = document.getElementById("box4");window.onscroll = function() {var screenHeight = window.innerHeight;var scrollTop = document.documentElement.scrollTop;if (screenHeight / 2 < scrollTop) {box1.classList.add("active");box2.classList.add("active");box3.classList.add("active");box4.classList.add("active");}};});
screenHeight / 2 < scrollTop の部分でどのぐらいスクロールされたら表示するかを決めます。
今回はウインドウの高さの半分スクロールされたら表示されるようにしました。