当前，我的导航栏有一个不错的过渡，使其在您向上滚动时逐渐消失。 我遇到的问题是，当我向下滚动时，过渡动画将不适用，并且会消失而不消失。
这是转换的代码：
transition: transform 500ms ease,background 500ms ease;
-webkit-transition: transform 500ms ease,background 500ms ease;
应用于过渡的类为.main-menu，但是它仅在向上滚动而不是向下滚动时触发。我不确定为什么会发生这种情况，因为.main-menu一直存在，所以无论菜单栏是否显示，它都不会触发吗？
感谢@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.1);
}