Navbar transition animation only on scroll up

Question

Currently, my navigation bar has a nice transition that makes it fade in when you scroll up. The issue that I am having is that when I scroll down, the transition animation does not apply, and it just vanishes without the fade.

This is the code for the transition:

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

The class that the transition is applied to is .main-menu, however it is only triggering on the scroll up not the scroll down. I am not sure why this is happening since .main-menu is always present so should it not trigger regardless if the menu bar is displaying or not?

This is the link to the page: http://eg-graphics.com/Website%20New/about-us.html

Answer 1

Thanks @MuraliNepalli for the guidance with his comment. Thanks to that, I was able to work it out. The answer was as follows:

In the CSS I needed to set the following

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