Elemen mesti hilang apabila halaman menghampiri penghujung

Question

Saya mempunyai kod JS ini untuk menambah dan mengalih keluar kelas apabila menatal ke bawah dari bahagian atas halaman, tetapi apa yang saya mahu lakukan ialah hilang apabila anda hampir ke penghujung halaman atau kembali selepas menatal dan kembali ke keadaan lama (cth. dari kanan :7px ke kanan: -150px). Saya menyalin kod JS yang sama dan menukar scrollTop > rollBottom tetapi ia tidak berfungsi.

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

Anda boleh menggunakan window.innerHeight untuk melakukan pengiraan di bahagian bawah skrol.

Sesuaikan dengan keperluan anda.

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

sssccc