您只需要对代码做很小的更改就可以将目标应用于多个元素。正如您所建议的，您将使用一个类来选择所有目标元素。然后，您将.each覆盖该集合，并在each处理程序中应用定位逻辑。由于window属性不会更改，因此可以将这些变量赋值留在.each处理程序之外。

$(window).scroll(function() {
  const $window = $(window);
  const windowHeight = $window.height();
  const windowScrollTop = $window.scrollTop();

  $('.scroll-to').each(function () {
    const $this = $(this);
    const top = $this.offset().top;
    const height = $this.outerHeight();
    const isInView = windowScrollTop > (top + height - windowHeight);

    $this.css({ opacity: (isInView ? 1 : 0) });
  });
});

body {
  margin: 0;
}

div {
  height: 100px;
  margin: 10px;
}

.one {
  background: purple
}

.two {
  background: orange;
}

.three {
  background: powderblue;
}

.four {
  background: pink;
}

.five {
  background: coral;
}

.six {
  background: plum;
}

.seven {
  background: turquoise;
}

.eight {
  background: crimson;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll-to one"></div>
<div class="scroll-to two"></div>
<div class="scroll-to three"></div>
<div class="scroll-to four"></div>
<div class="scroll-to five"></div>
<div class="scroll-to six"></div>
<div class="scroll-to seven"></div>
<div class="scroll-to eight"></div>