Javascript JS脚本需要时间来更改背景颜色

我在bootsrap上有一个导航栏，我想在滚动经过品牌名称时更改颜色。它的工作，但它不是立即，有时当我去顶部非常快，背景颜色不会改变。或者对于响应性，这是一样的，如果我把窗口变小，这需要时间

我的HTML：

<nav class="transparent navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-menu" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top">
                <img src="img/logo_menu.jpg" class="img-responsive" alt="">
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="collapse-menu">      
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#services">Services</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

完成我的JS：

$(document).ready(function(){
    if (window.matchMedia("(min-width: 768px)").matches) {   
        var scroll_start = 0;
        var startchange = $('.brand-name');
        var offset = startchange.offset();
        $(document).scroll(function() { 
          scroll_start = $(this).scrollTop();
          if(scroll_start > offset.top) {
              $('.navbar').animate({backgroundColor: "#222222"}, {duration:(500)});
           } else {
              $('.navbar').animate({backgroundColor: "transparent"}, {duration:(500)});
           }
        });
    }
    else {$('.navbar').css('background-color', '#222222');}
});

---

那么如何加快整个过程呢？

您正在排队观看动画

.stop（）

$('.navbar').stop().animate({backgroundColor: "#222222"}, {duration:(500)});

及

---

@泡泡面是的，它用于光滑的东西（0.5秒）。我说的是完成任务所需的时间detect@Popnoodles看这个问题，我已经编辑了html脚本，没有从给定的脚本中得到任何东西code@Popnoodles我使用Bootstrap，我试着把它放到jsfiddle上，添加了Bootstrap谢谢，它的效果更好，但是我们第一次进入网站时，它的栏是黑色的，为了响应，它也有点问题。我们如何解决它？本节未涉及的其他问题需要像其他问题一样提问。要在不滚动的情况下触发它（在页面加载时），您需要附加

。trigger（'scroll'）

$('.navbar').stop().animate({backgroundColor: "#222222"}, {duration:(500)});

$('.navbar').stop().animate({backgroundColor: "transparent"}, {duration:(500)});