Changing bootstrap navbar scroll effects

I am making my bootstrap navbar on scroll to change the background color to red with jquery and it do not work any help please.

HTML CODE

<header class="navbar navbar-default navbar-fixed-top" style="background-color:Transparent; border-color:#e74c3c;">
      <div class="navbar-brand" style="color:white;">Podlle</div>
      <div class="nabar-item">
         <a style="color:white;" href="#"<div class="navbar-text">Sign Up</div></a>
         <a style="color:white;" href="#"<div class="navbar-text">Log In</div></a>
      </div>

Jquery Code

<script type="text/javascript" src="http://ift.tt/1GEtfQr">
$(document).scroll(function(){
  $(".navbar").css("background-color" , "red");  
})

Please Help , Thanks