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

JS Script take time to change background color

本文关键字：背景 颜色 时间 脚本 JS      更新时间：2023-09-26

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

我的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');}
});

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

您正在对动画进行排队。每次CCD_ 1。

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

和

$('.navbar').stop().animate({backgroundColor: "transparent"}, {duration:(500)});
相关文章：