Sticky Header

HTML

<header class="container" id="sticky-top"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> </header> <h2 class='min-h'>Sticky Top Container while scrolling</h2>

CSS

.min-h{ min-height: 1200px; } #sticky-top{ position: sticky; top: 0; z-index: 99; } .shadow-header { box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%); padding:20px; background-color:red; color:#fff; }

Javascript

$(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#sticky-top').addClass('shadow-header').css('top', '0px'); } else { $('#sticky-top').removeClass('shadow-header').css('top', '-100px'); } });