导航栏过渡动画仅在向上滚动时答案

【问题标题】：Navbar transition animation only on scroll up导航栏过渡动画仅在向上滚动时
【发布时间】：2020-03-08 18:53:49
【问题描述】：

目前，我的导航栏有一个很好的过渡，当你向上滚动时它会淡入。我遇到的问题是，当我向下滚动时，过渡动画不适用，它只是消失而没有淡入淡出。

这是转换的代码：

transition: transform 500ms ease, background 500ms ease;
-webkit-transition: transform 500ms ease, background 500ms ease;

应用转换的类是.main-menu，但它只在向上滚动时触发，而不是向下滚动。我不确定为什么会发生这种情况，因为 .main-menu 始终存在，所以无论菜单栏是否显示，它都不应该触发吗？

这是页面的链接：http://eg-graphics.com/Website%20New/about-us.html

【问题讨论】：

似乎是“.header_area”上的位置属性。将其从“绝对”改为“固定”。
@MuraliNepalli 这个解决方案有点工作，但是当导航栏消失时，它开始不直接接触页面顶部，然后向上滑动。知道如何解决吗？
解决了，将在下面发布答案。

标签： javascript css scroll css-transitions transition

【解决方案1】：

感谢@MuraliNepalli 的评论指导。多亏了这一点，我才得以解决。答案如下：

在 CSS 中我需要设置以下内容

.header_area {
  position: fixed; /* position needed to be fixed */
  width: 100%;
  top: -120px; /* top needed to be -120px */
  left: 0;
  z-index: 99;
}

.header_area.navbar_fixed .main_menu {
    position: fixed;
    width: 100%;
    top: -120px; /* top needed to be -120px */
    left: 0;
    right: 0;
    background: #000;
    transform: translateY(120px); /* translation needed to be -120px */
    box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1); 
}

【讨论】：