JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="navbar">
  <p>
    Header...
  </p>
</div>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
   <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS

.navbar{
  position:fixed;top:0;background-color: gold;width:100%;
}

JavaScript

function scroller(){ 
    var target=$(window).scrollTop();
    console.log(target);

    if(target>=150){
        $('.navbar').css({'background-color':'rgba(191, 141, 87, 1)', 'box-shadow':'0px 0px 5px black', 'transition': 'all 1s ease'});
    }
    else{
        $('.navbar').css({'background-color':'rgba(191, 141, 87, 0)','box-shadow':'none'});
    }   
}   
 $(document).scroll(function(){
 	scroller();
 })