滚动上的导航栏透明

我试图让我的导航栏在滚动时变得透明，似乎没有任何效果。她是我一直在使用的代码。有什么建议吗？

//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>