Das Element muss verschwinden, wenn sich die Seite dem Ende nähert

Question

Ich habe diesen JS-Code zum Hinzufügen und Entfernen von Klassen, wenn ich vom oberen Rand der Seite nach unten scrolle, aber ich möchte ihn verschwinden lassen, wenn Sie sich dem Ende der Seite nähern, oder nach einigem Scrollen zurückgehen und zum Alten zurückkehren Zustand (z. B. von rechts :7px nach rechts: -150px). Ich habe den gleichen JS-Code kopiert und geändert scrollTop > rollBottom, aber es funktioniert nicht.

jQuery(document).on('scroll', (e) => {
  if (document.body.scrollTop > 120 || document.documentElement.scrollTop > 350) {
    console.log('now');
    jQuery('.ast-below-header-bar').addClass('filterr');
  } else {
    console.log('no');
    jQuery('.ast-below-header-bar').removeClass('filterr');
  }
})

body {
  height: 500vh
}

.ast-below-header-bar {
  display: grid;
  position: fixed;
  right: -150px;
  top: 14%;
  background: red;
  height: 200px;
  width: 200px;
  transition: .3s;
}

.ast-below-header-bar.filterr {
  right: 7px!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ast-below-header-bar"></div>

Answer 1

您可以使用 window.innerHeight 在滚动底部执行计算。

根据您的需要进行调整。

jQuery(document).on('scroll', (e) => {
  if ((window.innerHeight + window.pageYOffset + 350) <= document.body.offsetHeight && document.documentElement.scrollTop > 350) {
    console.log('now');
    jQuery('.ast-below-header-bar').addClass('filterr');
  } else {
    console.log('no');
    jQuery('.ast-below-header-bar').removeClass('filterr');
  }
})

body {
  height: 500vh
}

.ast-below-header-bar {
  display: grid;
  position: fixed;
  right: -150px;
  top: 14%;
  background: red;
  height: 200px;
  width: 200px;
  transition: .3s;
}

.ast-below-header-bar.filterr {
  right: 7px!important;
}