L'élément doit disparaître lorsque la page approche de la fin

Question

J'ai ce code JS pour ajouter et supprimer des classes lors du défilement depuis le haut de la page, mais ce que je veux faire, c'est disparaître lorsque vous approchez de la fin de la page ou revenir en arrière après un certain défilement et revenir à l'ancien état (par exemple de droite : 7px à droite : -150px). J'ai copié le même code JS et modifié scrollTop > rollBottom mais ça ne marche pas.

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

Vous pouvez utiliser window.innerHeight pour effectuer des calculs en bas du parchemin.

Adaptez-vous à vos besoins.

jQuery(document).on('scroll', (e) => {
  if ((window.innerHeight + window.pageYOffset + 350)  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;
}

sssccc