wordpress 接近页面末尾,元素需要消失

wvt8vs2t  于 2022-12-22  发布在  WordPress
关注(0)|答案(1)|浏览(121)
    • bounty将在5天后过期**。回答此问题可获得+50声望奖励。Selcuk xD希望引起更多人对此问题的关注:我需要的jsquery代码,帮助我实现我想要的。

我有这个JS代码,我用它来添加和删除一个类,同时从页面顶部向下滚动,但我想做的是,也消失时,你接近年底的页面或回到原来的状态后,一些滚动(从右:7px至右侧:-150px,例如).我复制了相同的JS代码,并改变了scrollTop > scrollBottom,它不工作.

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>
ilmyapht

ilmyapht1#

您可以使用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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ast-below-header-bar"></div>

相关问题