粘性导航在第一次滚动时向上滑动不流畅。之后就好了答案

【问题标题】：Sticky nav slide up not smooth on first scroll. Fine after粘性导航在第一次滚动时向上滑动不流畅。之后就好了
【发布时间】：2020-09-26 14:08:06
【问题描述】：

这让我发疯，我找不到原因。我正在使用以下内容使我的导航在向下滚动时向上滑动并在向上滚动时返回。

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-140px";
  }
  prevScrollpos = currentScrollPos;
}

这是 CSS

#navbar {
    position: fixed;
    width: 100vw;
    z-index: 99;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

问题是在页面加载后第一次向下滚动时它会突然消失。只有在后续滚动时才会平滑滑动。

【问题讨论】：

这可能是因为top样式不在css类中，所以就过渡而言，没有任何改变，因为它只是在看类。尝试创建两个类 - #navbar.one 和 #navbar.two（或任何有意义的名称），为每个 top 设置以及其余样式创建一个类，然后在代码中更改类。
@HookedHangman 除了上面的评论don't try to do css's job in javascript
我知道这很简单，只是我没有看到。我这样做是为了在学习的同时进行练习，所以这一切都非常有帮助。非常感谢。

标签： javascript

【解决方案1】：

是我没有指定初始位置。我肯定会根据所提供的建议重新修改它。

再次感谢。

【讨论】：