"Sticky Navbar"
Bootstrap 4.1.1 Snippet by Sagar Sonawane

<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 ----------> <!--top header--> <header > <!--most top info --> <div style="height: 100vh; background: #f2f9ee"> <h1 class="text-center">Hello Sagar</h1> </div> <!-- End most top info --> <nav class="navbar navbar-expand-lg navbar-light top-navbar" data-toggle="sticky-onscroll"> <div class="container"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> <ul class="navbar-nav pull-right"> <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Our Work</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </div> </nav> </header> <!-- End top header--> <section style="border: 1px solid red; height: 1000px;"> <h1 class="text-center">Section </h1> </section>
/*sticky header position*/ .sticky.is-sticky { position: fixed; left: 0; right: 0; top: 0; z-index: 1000; width: 100%; } body { min-height: 1200px; } nav { background: #eaebec; min-height: 85px; }
// Sticky navbar // ========================= $(document).ready(function () { // Custom function which toggles between sticky class (is-sticky) var stickyToggle = function (sticky, stickyWrapper, scrollElement) { var stickyHeight = sticky.outerHeight(); var stickyTop = stickyWrapper.offset().top; if (scrollElement.scrollTop() >= stickyTop) { stickyWrapper.height(stickyHeight); sticky.addClass("is-sticky"); } else { sticky.removeClass("is-sticky"); stickyWrapper.height('auto'); } }; // Find all data-toggle="sticky-onscroll" elements $('[data-toggle="sticky-onscroll"]').each(function () { var sticky = $(this); var stickyWrapper = $('<div>').addClass('sticky-wrapper'); // insert hidden element to maintain actual top offset on page sticky.before(stickyWrapper); sticky.addClass('sticky'); // Scroll & resize events $(window).on('scroll.sticky-onscroll resize.sticky-onscroll', function () { stickyToggle(sticky, stickyWrapper, $(this)); }); // On page load stickyToggle(sticky, stickyWrapper, $(window)); }); });

Related: See More


Questions / Comments: