<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="header bg-light py-5"> <div class="container"> <div class="row"> <div class="col-6"> welcome to my site </div> <div class="col-6 text-right"> call-123-456-790 </div> </div> <!--/row--> </div> <!--container--> </div> <nav class="navbar navbar-expand-sm sticky-top navbar-dark bg-dark mb-4"> <div class="container-fluid"> <a class="navbar-brand" href="#">Top navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto mb-2 mb-md-0"> <li class="nav-item active"> <a class="nav-link" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <form class="d-flex"> <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav> <div class="container"> <div class="row"> <div class="col-12 py-4"> <h2>test Content...</h2> <h5>Scroll down to see animated Navbar stick</h5> <br> <br> <br>abcd <br> <br> <br> <br> <br>hjku <br> <br> <br> <br> <br>abcd <br> <br> <br> <br> <br>hjku <br> <br> <br> <br> <br>abcd <br> <br> <br> <br> <br>hjku <br> <br> <br> <br> <br>abcd <br> <br> <br> <br> <br>hjku <br> <br> </div> </div> <!--/row--> </div> <!--container--> <br> <br> <br>abcd <br> <br> <br> <br> <br>hjku <br> <br> <br> <br> <br>abcd <br> <br> <br> <br> <br>hjku <br> <br>

.msticky.navbar{ padding-top:0px; padding-bottom:0px;} .sticky-top{ -webkit-transition: all 0.5s ease; transition: all 0.5s ease;}

$(window).scroll(function() { if ($(this).scrollTop() > 20){ $('nav').addClass("msticky"); } else{ $('nav').removeClass("msticky"); } });