0

坦率地说：我已经为我的标题准备了这个脚本，它工作得很好：

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos && currentScrollPos > 125) {
    document.getElementById("mobbar").style.top = "0";
  } else {
    document.getElementById("mobbar").style.top = "-10vh";
  }
  prevScrollpos = currentScrollPos;
}

附带的 CSS：

#mobbar {
    height: 10vh;
    position: fixed;
    top: 0px;
    background-color: #1f1f1f;
    transition: all 0.5s;
}

一切都按预期工作。现在，这看起来很无聊，所以要做好准备，我希望我的页脚元素发生同样的事情。我让它以某种方式与 style.bottom 和 scrollpos 一起工作，但我不能为我的生活提供一个版本，当你到达页面时首先隐藏固定页脚，然后在你向下滚动到一定数量时显示它（或“接近最终值”会更好）。

由于我失败了，我尝试了其他方法。我继续研究向一个元素添加一个滚动类，这样我就可以尝试将它滑入和滑出等等，但让我们彼此诚实，我失败了。

现在我什至不知道我是否可以重新使用我用于移动标题的相同类型的脚本（#mobheader 在我的标题的脚本中）并包含一个隐藏属性，直到开始向下滚动。

我现在不知道应该深入研究什么。在这方面相当新（多么令人惊讶！）并尝试阅读我设法找到的关于类似主题的内容，我觉得我离应该是一个可以正确阅读此内容的人的简单解决方案越来越远。因此，我在这里，需要被拯救！

非常感谢任何可以为我指明正确方向的人。

以防万一：这是我想出的具有相同效果但从底部开始的方法（CSS相同，但底部：0；）：

var nextScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (nextScrollpos < currentScrollPos) {
    document.getElementById("footbar").style.bottom = "0";
  } else {
    document.getElementById("footbar").style.bottom = "-10vh";
  }
  nextScrollpos = currentScrollPos;
}
4

0 回答 0