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!

Why are you assigning hover events to elements on every scroll? Basically all this can be done with few lines of js for scroll position and some css. At the moment this is hardest way possible. — Rauli Rajande

Rauli Rajande Rauli Rajande · Accepted Answer · 2018-01-28T12:39:30

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>

css transition only animated in one direction - jQuery scroll function

1 Answers