JavaScript

var theClass = ".navbar ";

    $(document).ready(function(){
             $( theClass  ).removeClass("bbb");
             $( theClass  ).addClass("aaa");
             $( theClass  ).css("top","100px");
    });

      $(window).scroll(function() { // check if scroll event happened
        if ($(document).scrollTop() > 60) { // check if user scrolled more than 50 from top of the browser window
           $( theClass  ).removeClass("aaa");
           $( theClass  ).addClass("bbb");
           $(".navbar-brand").removeClass("ddd");
           $(".navbar-brand").addClass("ccc");
           $( theClass  ).css("top","0px");
        } else {
             $( theClass  ).removeClass("bbb");
             $( theClass  ).addClass("aaa");
             $(".navbar-brand").removeClass("ccc");
             $(".navbar-brand").addClass("ddd");
             $( theClass  ).css("top","100px");
        }
      });

CSS SCSS LESS

.aaa{
transition: all 0.8s ease;
background-color: rgba(255,0,255,0.3);
top: 180px;
width:85%;
height:4em;
margin:0 auto;
padding:8px;
}
.bbb{
transition: all 0.8s ease;
background-color: #bfbfbf;
top: 0px;
width:100%;
margin:0 auto;
padding:40px;
text-align:center;
}
.ccc{
transition: all 0.8s ease;
margin-left: 6px;

}
.ddd{
transition: all 0.8s ease;
margin-left: 0px;
}

HTML

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="navbar  navbar-fixed-top aaa" >
Can be any element. Use the most with the Menu Button, Navbar
</div>

<h2>Scrool down</h2>
<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 /><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 />
Coooool!