Fixed and transitional nav/header on scroll

by Jesse M

HTML

<header>nav goes here</header>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

CSS

body, header {
  margin:0;
  background:#fff;
}
body {
  padding:0;
  background:url('https://i.ytimg.com/vi/lt0WQ8JzLz4/maxresdefault.jpg') top center no-repeat;
}
header {
  padding:10px 15px;
  position:fixed;
  width:100%;
  text-align:center;
  -webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;

}

JavaScript

$(document).scroll(function(){
    if($(this).scrollTop() > 50){
      $('header').css({
        'background':'#4d4d4d',
        'border-bottom':'2px solid rgba(0,0,0,1)',
        'color':'#fff',
      });
    }else if($(this).scrollTop() < 50){
      $('header').css({
        'background':'#fff',
        'border-bottom':'2px solid rgba(0,0,0,0)',
        'color':'#000',
      });
    }
});