javascript - 导航栏在滚动时透明

我正在尝试使导航栏在滚动时透明，似乎没有任何作用。她是我一直在使用的代码。有什么建议么？

//transparent scroll

$(document).ready(function(){

    $(window).scroll(function(){

    if($(window).scrollTop()>100)
    $(".navbar").css({"background-color" : "rgba(0,0,0,.5)"});

    else
    $(".navbar").css({"background-color" : "transparent"});


    });

});

CSS

/* navbar */
.navbar-default {
    background-color: $back-two;
    border-bottom: 0.5px solid #979797;
}

/* link */
.navbar-default .navbar-nav > li > a {
    color: $textcol;
    font-family: 'Montserrat';
    font-size: 15px;
}

//hover
.navbar-default .navbar-nav > li > a {
    border-bottom: 2px solid transparent;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transition: all 0.8s;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    border-bottom: 2px solid $accent;
}

//focus
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background-color: $back-two;
    border-bottom: 2px solid $accent;
}

.navbar-toggle {
    background-color: transparent;
}


HTML

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <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">Ross Finn</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav pull-right">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a class="page-scroll" href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#work">Work</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#tf-contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

最佳答案

像这样尝试

$(window).scroll(function() {
    if ($(".navbar").offset().top > 100) {
        $(".navbar").css({
            "background-color": "rgba(0,0,0,.5)"
        });
    } else {
        $(".navbar").css({
            "background-color": "transparent"
        });
    }
});