STICKY NAV AFTER SCROLL - STYLE CHANGE AT SOME WAYPOINT CONTAINER - #2

by bizamajig

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
 <div class="container">
    <div class="jumbotron"><h1>Hello, world!</h1>
<p style="overflow:scroll">ddjsakkhhhhhhhhasadoaidhfffffffffffffffffffffffffffffffffffffffffffffffffffffffffmmmmmmmmmmmmmmmmmmmmnnnnnnnnffffffffffkkkkkkkkkkkkkkkkkdakkkkkkkkkkkkkkkkkkkkkkkkkakkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkaaaaaaaaaaaaaaaaaaaaaaaaaaaakkkkkkkkkkkkkkkkkkkkaaaaaaaaaaaaaaaaaaaaajdddddddddddddddddddddddddddddlaksdd</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
</div>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>



<div class="spacer"></div>

<p class="start_change_on_first">
    Roof party kale chips fixie viral DIY salvia seitan XOXO Banksy. Chia plaid meggings, DIY Thundercats salvia freegan jean shorts gentrify. Retro four loko meh, banjo bespoke ennui wolf before they sold out vegan keytar gastropub beard seitan fashion axe street art. Cosby sweater American Apparel gluten-free skateboard leggings plaid swag banh mi Williamsburg...

CSS

.navbar-default{
    background:transparent;
    border:none !important;
}
.navbar-nav>li>a:hover{
    color:#1a1a1a;
} 
.collapse.in{
    
    background-color:#f0f0f0 !important;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus
.spacer{
   background-color:#888;   
}

.spacer{
    height:100px;
}

JavaScript

$(document).ready(function(){       
   var $element = $('.start_change_on_first:first'),
   	input__scroll_start = 0,
    input__offset = $element.offset();
    if ( $element.length > 0 ){
     $( document ).scroll( function() { 
        input__scroll_start = $(this).scrollTop();
        if( input__scroll_start > input__offset.top ) {
            $(".navbar-default").css('background-color', '#f0f0f0');
         } else {
            $('.navbar-default').css('background-color', 'transparent');
         }
     });
    }
});