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

<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>

.active {
        opacity: 1;
        transform: translateY(0vh);
 }

	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");
      }
    };
  });