向下滚动时褪色的文字不会消失

Question

我正在尝试使文本淡入淡出，当您滚动经过它并在接近屏幕顶部时淡出。我有淡入淡出，但没有淡出。

我尝试过切换公式，但这仅影响了淡入效果。这是fade in

的演示

$(document).ready(function() {
  var faders = document.getElementsByClassName("fader");
  $(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
      document.getElementsByClassName("fader")[0].style.opacity = 0;
    } else {
      document.getElementsByClassName("fader")[0].style.opacity = 1;
    }
    let bounding = $(window).scrollTop() - $(window).height() * 0.5;
    let twentyPer = $(window).height() * 0.2;
    let boundingEle = document.getElementsByClassName("divider")[0].getBoundingClientRect();
    if (boundingEle.top < bounding) {
      if (boundingEle.bottom > bounding || document.getElementsByClassName("fader")[1].scrollTop) {
        document.getElementsByClassName("fader")[1].style.opacity = 0;
      } else {
        document.getElementsByClassName("fader")[1].style.opacity = 1;
      }
    }
    bounding -= $(window).height();
    boundingEle = document.getElementsByClassName("divider")[1].getBoundingClientRect();
    if (boundingEle.top < bounding) {
      if (boundingEle.bottom > bounding || document.getElementsByClassName("fader")[2].scrollTop) {
        document.getElementsByClassName("fader")[2].style.opacity = 0;
      } else {
        document.getElementsByClassName("fader")[2].style.opacity = 1;
      }
    }
  });
});

它应该随着文本到达顶部而逐渐消失，但是正如您在demo中所看到的那样，它根本不会消失。