javascript - Unable to change background of navbar on scrolling? -

i new web-dev , trying change background color transparent blue upon scrolling. using bootstrap. tried using javascript code didn't work

 $(document).ready(function(){         var scroll_start = 0;  var startchange = $('#startchange');  var offset = startchange.offset();  if (startchange.length){  $(document).scroll(function() {    scroll_start = $(this).scrolltop();   if(scroll_start > offset.top) {       $("nav.navbar div.container-fluid").css('background-color', '#f0f0f0');    } else {       $("nav.navbar div.container-fluid").css('background-color', 'transparent');    }  }); } 

this html code using

<nav class="navbar" data-spy="affix">     <div class="container-fluid">         <div class="container">             <div class="navbar-header">                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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" href="/"><img src="images/rubix-logo-navy.png"></a>             </div>             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">                 <ul class="nav navbar-nav navbar-right">                     <li><a href="#about">about</a></li>                     <li><a href="#team">team</a></li>                     <li><a href="#contact">contact</a></li>                 </ul>             </div>         </div>     </div> </nav> 

and css

nav.navbar {   margin: 0;   left: 0;   right: 0;   position: fixed;   top: -100%;   border-radius: 0;   transition: 300ms;   -webkit-transition: 300ms;   border: none; }   @media screen , (max-width: 767px) {     nav.navbar {       position: static;       top: 0;        } }   nav.navbar div.container-fluid {     background-color: transparent; }   nav.navbar button.navbar-toggle span.icon-bar {     color: #002776;     border-color: #002776;     background-color: #002776; }   nav.navbar a.navbar-brand {     color: #002776;     font-weight: 700;     font-size: 22px;     padding-top: 20px;     padding-bottom: 20px; }     nav.navbar a.navbar-brand img {       width: 125px; }     @media screen , (max-width: 767px) {       nav.navbar a.navbar-brand {         padding-top: 7px;         padding-bottom: 7px;         font-size: 16px; } }   nav.navbar ul.nav li {     color: #002776;     transition: 300ms;     -webkit-transition: 300ms;     line-height: 24px;     font-size: 22px;     padding-top: 25px;     padding-bottom: 25px; }     nav.navbar ul.nav li a:hover {       color: #00a1de;       background-color: transparent; }   @media screen , (min-width: 768px) {     nav.navbar.affix {       position: fixed;       top: 0;       z-index: 100; } }     nav.navbar div.container-fluid.top-nav-collapse {         padding: 0;         border-bottom: 1px solid rgba(255,255,255,.3);         background: #000;     } 

help appreciated

from understand, want change nav background when scroll down, , change when scroll top? if correct, may edit want.

$(document).ready(function(){      var scroll_start = 0;  var offset = $("body").offset();  $(document).scroll(function() {     scroll_start = $(this).scrolltop();   if(scroll_start > offset.top) {        $("nav.navbar div.container-fluid").css('background-color', '#f0f0f0');    } else {       $("nav.navbar div.container-fluid").css('background-color', 'transparent');    }  }); });