javascript - 在滚动上执行 addClass 或 removeClass 时如何添加淡入或淡出动画

Question

当有滚动时，我基本上尝试使用以下 jquery 更改 bootstrap 4 导航栏的类，但这似乎不起作用

$(window).scroll(function() {
  var scroll = $(window).scrollTop();

  if (scroll >= 100) {
    $(".navbar")
      .removeClass("navbar-dark")
      .fadeOut("fast");
    $(".navbar")
      .addClass("navbar-light bg-light")
      .fadein("slow");
  } else {
    $(".navbar")
      .removeClass("navbar-light bg-light")
      .fadeOut("fast");
    $(".navbar")
      .addClass("navbar-dark")
      .fadein("slow");
  }
});

Answer 1

• 您不需要两个类。仅默认样式和特殊类。
• 不要使用 jQuery 来做动画 - 使用CSS3 and transition相反
• 使用jQuery's .toggleClass()方法
• 缓存您的选择器元素!最糟糕的事情就是在每次滚动勾选查询整个 DOM 时去搜索 .class 元素 - 这是一个成本太高的操作。

const $navbar = $('.navbar'); // Cache your elements!!

$(window).on('scroll', function() {
  const st = $(window).scrollTop();
  $navbar.toggleClass('is-scrolled', st >= 100);
});

body {
  margin: 0;
  height: 300vh; /* DEMO to force scrollbars */
}


/* DEFAULT STYLE */
.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  transition: 0.4s;
  background: gold;  
}

/* SCROLLED STYLE */
.navbar.is-scrolled { 
  background: #888;
}

<div class="navbar">NAVBAR</div>Scroll down...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>