JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navbar">NavBar</div>

CSS

body {
    height:1000px;
}
#navbar {
    position:absolute;
     /* Fallback for web browsers that don't support RGBa */
     background-color: rgb(0, 0, 0);
     background-color: rgba(50,32,15,0.5);     
     /* For IE 5.5 - 7*/
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c32200F, endColorstr=#4f32200F);
     /* For IE 8*/
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c32200F, endColorstr=#4f32200F)";
}

JavaScript

$(document).ready(function () {
       var $scrollingDiv = $("#navbar");

       $(window).scroll(function () {
           $scrollingDiv.stop()
               .animate({
               "marginTop": ($(window).scrollTop() + 0) + "px"
           }, "slow");
           $scrollingDiv.css("background-color", (($(window).scrollTop() / $(document).height()) > 0.15) ? "orange" : "");
       });
   });