On scroll transition nav

by ashleycam3ron

HTML

<nav>
  <ul id="navbar">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Contact</a></li>
  </ul>
</nav>

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

<p id="startchange">
    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 drinking vinegar, vinyl slow-carb brunch photo booth. Sartorial Etsy Truffaut, small batch banh mi letterpress tousled cardigan leggings 3 wolf moon ethical messenger bag PBR&B. Tofu Schlitz narwhal, banjo Bushwick forage trust fund next level bespoke. Gastropub scenester Truffaut locavore deep v, forage ugh Wes Anderson twee.
</p>
<p>
Pug beard American Apparel post-ironic normcore, aesthetic plaid gentrify narwhal asymmetrical craft beer photo booth gastropub Echo Park selfies. Asymmetrical Etsy church-key Cosby sweater street art, ethical tattooed Portland shabby chic small batch twee scenester hella seitan direct trade. Plaid mlkshk lomo try-hard, Portland High Life selvage cray VHS quinoa. Ennui selfies skateboard, lo-fi iPhone mustache kogi. Tumblr brunch wolf Intelligentsia gluten-free Bushwick. Blog tote bag keytar, twee put a bird on it 8-bit chambray iPhone pop-up Intelligentsia. Brunch ethical quinoa cray, hashtag before they sold out Banksy.
</p>
<p>
+1 wayfarers Schlitz tofu, next level single-origin coffee actually. Butcher fap artisan, Kickstarter beard messenger bag narwhal forage master cleanse normcore irony tofu bicycle rights vegan readymade. Disrupt readymade semiotics cray church-key, Tonx artisan leggings keffiyeh bespoke sriracha VHS photo booth viral 8-bit. Viral try-hard chambray Kickstarter YOLO, meh tofu Brooklyn farm-to-table. Actually street art small batch raw denim PBR&B...

CSS

nav ul{
    list-style:none;
    display:inline;
    padding:7px 7px;
    background:transparent ;
    position:fixed;
}

nav ul li{
    display:inline;
    padding:10px 10px;
}

.spacer{
    height:50px;
}

JavaScript

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