<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 id="header" class="header"> Header </header> <main class="main"> <p>Lorem Ipsum is simply dummy....</p> <p>Lorem Ipsum is simply dummy....</p> <p>Lorem Ipsum is simply dummy....</p> </main>

body{ width: 100%; height: 100%; margin: 0; padding: 0; } .header{ position: fixed; width: 100%; height: 64px; background-color: #673ab7; -ms-flex-pack: justify; justify-content: space-between; will-change: transform; transition: transform 0.25s ease-in-out; fill: hsla(0,0%,100%,.9); z-index: 2; } .main{ background-color: rgba(0,0,0,0.1); height: 150vh; padding-top: 70px; } .header-unpin{ transform: translateY(-100%); } .header-pin{ transform: translateY(0); }

var lastKnownScrollY = 0; var currentScrollY = 0; var ticking = false; var idOfHeader = 'header'; var eleHeader = null; const classes = { pinned: 'header-pin', unpinned: 'header-unpin', }; function onScroll() { currentScrollY = window.pageYOffset; if (currentScrollY < lastKnownScrollY) { pin(); } else if (currentScrollY > lastKnownScrollY) { unpin(); } lastKnownScrollY = currentScrollY; } function pin() { if (eleHeader.classList.contains(classes.unpinned)) { eleHeader.classList.remove(classes.unpinned); eleHeader.classList.add(classes.pinned); } } function unpin() { if (eleHeader.classList.contains(classes.pinned) || !eleHeader.classList.contains(classes.unpinned)) { eleHeader.classList.remove(classes.pinned); eleHeader.classList.add(classes.unpinned); } } window.onload = function() { eleHeader = document.getElementById(idOfHeader); document.addEventListener('scroll', onScroll, false); }