css transition only animated in one direction - jQuery scroll function

Question

It is a wordpress site. I'm trying to animate header when scrolling. Here is the website . Here is the jQuery code:

jQuery(window).on("scroll", function() {
  if (jQuery(window).scrollTop() > 45) {
    jQuery(".fusion-header").addClass("active");
    jQuery(".fusion-header").removeClass("top");
    jQuery(".fusion-main-menu > ul > li > a").addClass("menu-sticky-color");
    jQuery('.fusion-main-menu > ul > li > a').hover(
      function() {
        jQuery(this).addClass('hover2')
      },
      function() {
        jQuery(this).removeClass('hover2')
      }
    ) jQuery('.fusion-main-menu > ul > li > a').hover(
      function() {
        jQuery(this).removeClass('hover1')
      }
    ) jQuery(".fusion-logo a").addClass("sticky-logo1");
    jQuery(".fusion-logo a").removeClass("logo1");

  } else {
    jQuery(".fusion-main-menu > ul > li > a").removeClass("menu-sticky-color");
    jQuery(".fusion-header").removeClass("active");
    jQuery(".fusion-header").addClass("top");
    jQuery(".fusion-logo a").addClass("logo1");
    jQuery(".fusion-logo a").removeClass("sticky-logo1");
    jQuery('.fusion-main-menu > ul > li > a').hover(
      function() {
        jQuery(this).addClass('hover1')
      },
      function() {
        jQuery(this).removeClass('hover1')
      }
    ) jQuery('.fusion-main-menu > ul > li > a').hover(
      function() {
        jQuery(this).removeClass('hover2')
      }
    )
  }
});

Header transition is working from top to down (scrollTop() < 45), but when user scrolls to the top there is not reverse animation. I'm stuck on this for days and cannot figure out how to make transition from down to top when scrollTop() < 45. Thank you for any help!

Answer 1

Here is an example, which uses js only for adding and removing menu modifier class. Changes between these two are described in css.

(Using SCSS (SASS3) would make managing css easier)

 // cache variables to avoid time consuming element search in dom on every scroll step var $menu = $('.menu'); var $box = $('.box'); $box.on('scroll', function(){ if ($box.scrollTop() > 45){ $menu.addClass('menu_scrolled'); } else { $menu.removeClass('menu_scrolled'); } }) 

 .box { height: 200px; position: relative; overflow: scroll; } .menu { position: fixed; font-size: 16px; width: 100%; } .menu_scrolled.menu { font-size: 12px; } .item { display: inline-block; cursor: pointer; } .item:hover { /* this is how hover styles should work */ font-weight: bold; } .menu_scrolled .item { color: green; } /* ideally you use scss and nest changed styles inside .menu_scrolled or opposite: (use this first example, when your modifier situations make big changes to the layout etc) // normal css .menu { position: fixed; font-size: 16px; width: 100%; } .item { display: inline-block; cursor: pointer; } //scrolled css .menu_scrolled { &.menu { font-size: 12px; } .item { color: green; &:hover { font-weight: bold; } } } OR (when your modifier situations are smaller) // .menu with modifier on scroll .menu { position: fixed; font-size: 16px; width: 100%; .menu_scrolled& { font-size: 12px; } } // .item with modifier on scroll .item { display: inline-block; cursor: pointer; &:hover { font-weight: bold; } .menu_scrolled & { color: green; } } */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <div class="menu"> <div class="item">item1</div> <div class="item">item2</div> <div class="item">item3</div> <div class="item">item4</div> </div> <div class="content"> <pre> content content content content content content content content content content content content content content content </pre> </div> </div>