<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 ----------> <header class='site__header'> <h2 class='text-center mb-0 bg-dark text-white'>Header</h2> </header> <main class='site__main'> <div class='container'> <h4 class='py-5 mb-0' style='height:250vh'>Body</h4> </div> </main>

.site__header.fixed { position:fixed; width:100%; top:0; }

var $header = $(".site__header"); var headerHeight = $header.height(); // Set fixed position on scroll $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop > headerHeight) { $header.addClass("fixed"); // Add padding to content to maintain layout $(".site__main").css("padding-top", headerHeight + "px"); } else { $header.removeClass("fixed"); $(".site__main").css("padding-top", "0"); } });