<header id="masthead" class="site-header">
<div class="container">
<div class="row">
<div class="col-lg-4">
<h1>LOGO</h1>
</div>
<div class="col-lg-8">
<ul class="nav nav-pills">
<li class="nav-item"><a href="#" class="nav-link" aria-current="page">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
</ul>
</div>
</div>
</div>
</header>
body{
height:1500px;
}
#masthead {
padding:10px 0;
border-bottom:1px solid #ccc;
}
.nav {
display: flex;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
margin-top:5px;
list-style: none;
float: right;
}
.nav-link {
display: block;
padding: .5rem 1rem;
color: #000;
text-decoration: none;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
.fixed{
position: fixed!important;
z-index: 9999;
margin: 0 auto;
width: 100%;
top: 0;
background: #2ecc71;
transform: translate(0, -200px);
}
.fixed .nav-link{
color:#fff;
}
.inView{
transform: translate(0,0);
transition: all .5s ease;
}
jQuery(document).ready(function() {
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 100) {
jQuery('#masthead').addClass('fixed');
} else {
jQuery('#masthead').removeClass('fixed');
}
if (jQuery(this).scrollTop() > 200) {
jQuery('#masthead').addClass('inView');
} else {
jQuery('#masthead').removeClass('inView');
}
});
});