用JavaScript更改滾動條上的導航欄顏色不起作用

Question

我的目標是在滾動後讓導航欄從透明變爲指定顏色。不過，我的代碼看起來並不有效，因爲滾動後該欄保持透明。我已經搜索了一些成功的問題，但是我覺得我的js代碼應該足以滿足我想要完成的任務;只是沒有我在js，css或html文件中可能遇到的一些小錯誤。

JS：

$(document).ready(function() 
{ 
    var scroll_start = 0; 
    var startchange = $('.navbar-default'); 
    var offset = startchange.offset(); 

    $(document).scroll(function() 
    { 
     scroll_start = $(this).scrollTop(); 
     if (scroll_start > offset.top) 
     { 
      $('.navbar-default').css('background-color', 'black'); 
     } 
     else 
     { 
      $('.navbar-default').css('background-color', 'transparent'); 
     } 
    }); 

}); 

CSS：

.navbar-default { 
    background: transparent !important; 
    transition-duration: 1s; 
} 
.color-fix>li>a { 
    color: white !important; 
} 
.color-fix>a { 
    color: white !important; 
} 
#nav-right { 
    float: right; 
} 

HTML：（未定義類是從自舉）

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="navbar-header color-fix"> 
     <a class="navbar-brand" href="">g·nee</a> 
    </div> 
    <ul class="nav navbar-nav color-fix" id="nav-right"> 
     <li><a href="">Home</a></li> 
     <li><a href="">Page 1</a></li> 
     <li><a href="">Page 2</a></li> 
    </ul> 
</nav> 

Answer 1

!important是如此，刪除它，它的工作原理。

https://jsfiddle.net/2gq2nqhr/

Answer 2

從CSS中刪除!important，其防止風格改寫。

.navbar-default { 
    background: transparent ; 
    transition-duration: 1s; 
} 
.color-fix>li>a { 
    color: white ; 
} 
.color-fix>a { 
    color: white; 
} 
#nav-right { 
    float: right; 
}