javascript - Javascript使固定顶部菜单标题向上移动30px并在滚动时平滑过渡？

Question

我是 Javascript 新手。

这是我到目前为止所拥有的： https ://journeysendstudios.com/ospitest/

（只关注标题）

到目前为止我所做的是，当你向下滚动时，绿色部分消失，黑色部分向上移动：0。这是有效的，但当然它看起来很突然。（不确定这是否是实现这一目标的最佳方式）但我想弄清楚如何简化过渡？我应该使用 CSS 还是在脚本中这样做？如何缓解盒子从 top:0 上下移动的过渡？

这是我正在使用的 Java：

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("MenuShrink").style.top = "0px";

  } else {
    document.getElementById("MenuShrink").style.top = "30px";

  }
}

感谢您的帮助！

标签： javascriptcssmenuheaderfixed