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

时间:2019-11-13 01:58:53

标签: javascript css scroll css-transitions transition

当前,我的导航栏有一个不错的过渡,使其在您向上滚动时逐渐消失。 我遇到的问题是,当我向下滚动时,过渡动画将不适用,并且会消失而不消失。

这是转换的代码:

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

1 个答案:

答案 0 :(得分:0)

感谢@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); 
}