Bootstrap Sticky Header

Bootstrap Sticky Header with animation

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--Navigation-->	 
<nav class="navbar navbar-inverse  navbar-fixed-top" >

<div class="conatiner-fluid">
     <!--page scroll button for -->
   <div class="navbar-header" role="navigation">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target= "#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>			
       </button>
	   <a class="navbar-brand" href="#">Website</a>
   </div>	<!--page scroll button-->
   
   <div>
   <div class="collapse navbar-collapse" id="myNavbar">

      <ul class="nav navbar-nav navbar-right">
        <li ><a href="#">Home</a></li>
        <li ><a href="#about">About</a></li> 
        <li ><a href="#services">Services</a></li>
        <li ><a href="#contact">Contact</a></li>
      </ul>
	  </div> <!--ul-li-->
	 </div> <!--navbar collapse-->
  </div> <!--container-fluid-->
</nav>
<!--Navigation-->

<!--Header-->
 <header>
     <div class="container" >
	 <div class="intro-text">
                <!--<div class="intro-lead-in">Welcome To Our Studio!</div>-->
                <div class="intro-heading">You have landed our page!</div>
                <a href="#services" class="page-scroll btn btn-xl">Tell Me More</a>
            </div>
        </div>
        
 </header>
<!--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 />
<br />
<br />
<br />
end page

CSS

nav.navbar{
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
}

.navbar-inverse {
    background-color: #222;
    border-color: #080808;
}

nav.navbar.transparent {
  background-color:rgba(0,0,0,0);
}

JavaScript

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('transparent');
  } else {
    $('nav').removeClass('transparent');
  }
});