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

удалить !important из CSS, его предотвратить стиль перезапись.

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