<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="header">the header</div> </div> </div>

* {margin:0;padding:0} html { background: lightgray; height: 5000px; } .header { position: fixed; top: 0; left: 0; width: 100%; padding: 0; z-index: 10000; transition: all 0.2s ease-in-out; height: auto; background-color:transparent; text-align: center; line-height: 40px; } .header.active {

$(window).on("scroll", function() { if($(window).scrollTop() > 50) { $(".header").addClass("active"); } else { //remove the background property so it comes transparent again (defined in your css) $(".header").removeClass("active"); } });