<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');
        }
		
      });

});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js