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>