CSS过渡仅在一个方向上具有动画效果-jQuery滚动功能

Question

这是一个WordPress站点。 我正在尝试在滚动时设置标题动画。 这是网站 。 这是jQuery代码：

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

标题过渡是从上到下（scrollTop（）<45），但是当用户滚动到顶部时，没有反向动画。 我在此问题上停留了几天，无法确定当scrollTop（）<45时如何从下到上过渡。谢谢您的帮助！

Answer 1

这是一个示例，该示例仅将js用于添加和删除菜单修饰符类。 两者之间的更改在CSS中进行了描述。

（使用SCSS（SASS3）可以简化CSS的管理）

 // 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>