导航栏过渡动画仅在向上滚动时显示

Question

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

这是转换的代码：

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

Answer 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); 
}