根据 scroll 高度更換header menu 背景颜色，使用jquery + animation，但遇到问题

Question

$(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
    $('.header-menu-layout').css('background-color', 'white');
    $('.header-menu-layout').animate({
      backgroundColor: 'white'
    }, 300);
  }

  if ($(this).scrollTop() == 0) {
    $('.header-menu-layout').css('background-color', 'transparent');
    $('.header-menu-layout').stop().animate({
      backgroundColor: 'transparent'
    }, 300);
  }
});

当高度大于1 px以上
会运行animate，背景变成白色这没问题
但发现一个致命问题
就是1px以上跟2px以上.....，他都会运行第一段fucntion
导致滚动事件必须停止时，他才会跑出动画效果！
因为你滚动一次就监听一次？
我参考的做法是
https://www.spectacles.com/
只是他的做法似乎不是这样？

Answer 1

当Scroll发生过程中（还没停止），第一段function不断被执行，它的animation有300毫秒延迟，每一px的滚动都会让第一个function执行一遍，都会触发antmation，后一个animation的执行会让前一个animation执行终止。 当滚动停止后，最后一个animation才得以执行。

想要达成你的目的，可以简单的设置一个bool变量，滚动发生时判断是否为true，保证只执行一次。页面回归原位时，设置为false。

var isScrollAnimationFired = false;
$(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
    $('.header-menu-layout').css('background-color', 'white');
    if(!isScrollAnimationFired) {
      $('.header-menu-layout').animate({
        backgroundColor: 'white'
      }, 300);
      isScrollAnimationFired = true;
    }
  }

  if ($(this).scrollTop() == 0) {
    $('.header-menu-layout').css('background-color', 'transparent');
    $('.header-menu-layout').stop().animate({
      backgroundColor: 'transparent'
    }, 300);
    isScrollAnimationFired = false;
  }
});