Фиксированная навигация

$(window).on('scroll', function() { 
  var nav = $('.navbar'); 
  if (nav.offset().top > 780) { 
    nav.addClass('fixed-top'); 
    nav.css({ 
      "background-color": "#red" 
    }); 
  } else { 
    nav.removeClass('fixed-top'); 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
  <a class="navbar-brand" href="#">Navbar</a> 
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
        <span class="navbar-toggler-icon"></span> 
      </button> 
 
  <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
      <li class="nav-item"> 
        <a class="nav-link" href="#">Home</a> 
      </li> 
 
      <li class="nav-item"> 
        <a class="nav-link" href="#">News</a> 
      </li> 
 
      <li class="nav-item"> 
        <a class="nav-link" href="#">Home</a> 
      </li> 
 
      <li class="nav-item"> 
        <a class="nav-link" href="#">Contacts</a> 
      </li> 
    </ul> 
  </div> 
</nav>