时间戳

首页 > 解决方案 > 如何通过 div 标签而不是使用 JS 的像素隐藏/显示粘性页脚菜单

javascript - 如何通过 div 标签而不是使用 JS 的像素隐藏/显示粘性页脚菜单

问题描述

首先，让我澄清一下，我对此非常陌生，所以我为使用错误的术语道歉。

我正在寻找重新创建 Morning Brew 的粘性页脚选择加入表单（单击此处以获取参考），但我目前使用的代码仅跟踪像素。有没有办法可以做到，所以它会寻找 div 标签？

<script>
  var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos < 4200 && prevScrollpos > 200) {
    document.getElementsByClassName("_form")[0].style.display = "block";
  } else {
    document.getElementsByClassName("_form")[0].style.display = "none";
  }
  prevScrollpos = currentScrollPos;
} 
</script>

标签： javascripthtmljquerycss

解决方案

您可以通过这种方式使用窗口并获取滚动事件：

let element = document.getElementById('footer');

  window.addEventListener('scroll', function(e){
    let Y = window.scrollY;
    console.log(Y);
    Y > 600 ? element.style.display = 'block' : element.style.display = 'none';
  })
body{
    height: 1600px;
}
<div id="footer">Element to fix</div>

推荐阅读