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

Question

我在 bootsrap 上有一个导航栏，我想在滚动通过品牌名称时更改颜色。它可以工作，但不是立即，有时当我很快到达顶部时，背景颜色没有改变。或者对于响应它是相同的，如果我把 windows 放小它需要时间。

我的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>

我的CSS:

.transparent {
    background:transparent;
}

为了完成我的 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');}
});

那么我怎样才能加快整个过程呢？

Answer 1

您正在排队动画。 .stop() 每次都是。

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

和

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

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

JS Script take time to change background color

javascript

jquery

background

navbar

twitter-bootstrap