Question

这是一个wordpress网站。我在滚动时尝试动画标题。这是website。这是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（）＆lt; 45），但是当用户滚动到顶部时，没有反向动画。我已经坚持了几天，并且无法弄清楚当scrollTop（）＆lt;时，如何从下到上进行转换。 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>

css过渡只在一个方向动画 - jQuery滚动功能

1 个答案: