當頁面接近結束時，元素必須消失

Question

我有這個JS 程式碼，用於在從頁面頂部向下滾動時添加和刪除類，但我想要做的是當您接近頁面末尾或返回時消失一些滾動後恢復到舊狀態（例如，由右：7px 到右：-150px）。我複製了相同的JS程式碼並更改了scrollTop > rollBottom，但它不起作用。

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

sssccc