// Shadow on Scroll
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$('#HeadWrap').addClass('Active');
} else {
$('#HeadWrap').removeClass('Active');
}
didScroll = true;
});
// Hide header on scroll down
var didScroll,
lastScrollTop = 0,
trigger = 0,
navHeight = $('#HeadWrap').outerHeight();
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 0);
function hasScrolled() {
var st = $(this).scrollTop();
// Ensure scroll more than trigger
if (Math.abs(lastScrollTop - st) <= trigger)
return;
// If past .Head add .NavUp.
if (st > lastScrollTop && st > navHeight) {
// Scroll Down
$('#HeadWrap').removeClass('NavDown').addClass('NavUp');
} else {
// Scroll Up
if (st + $(window).height() < $(document).height()) {
$('#HeadWrap').removeClass('NavUp').addClass('NavDown');
}
}
lastScrollTop = st;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#HeadWrap {
position: fixed;
top: 0;
width: 100%;
background: #e5e5e5;
transition: all .2s ease-in-out;
z-index: 9999;
}
#HeadWrap.Active {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
#HeadWrap.NavUp {
top: -50px;
}
#Header {
position: relative;
height: 50px;
padding: 0 10px;
background: blue;
color: #fff;
z-index: 100;
}
#SubHdr {
background: #111;
color: #fff;
display: flex;
height: 30px;
white-space: nowrap;
justify-content: space-between;
}
#Logo {
background: green;
width:100px;
}
nav{
display: flex;
flex:1;
}
nav a{
display: flex;
flex:1;
justify-content:center;
align-items:center;
color:#fff;
}
main {
position: relative;
padding-top: 90px;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="HeadWrap">
<header id="Header" class="MxW">
HEADER
</header>
<section id="SubHdr">
<div id="Logo">
LOGO
</div>
<nav>
<a href="#">LINK 1</a>
<a href="#">LINK 2</a>
<a href="#">LINK 3</a>
<a href="#">LINK 4</a>
<a href="#">LINK 5</a>
</nav>
</section>
</div>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut cursus tellus vitae lacus vestibulum, a consequat metus mattis. Cras viverra mollis finibus. Curabitur maximus purus leo, vitae pellentesque elit consequat at. Sed vestibulum purus fringilla ligula egestas aliquam. Morbi ac euismod neque. Duis egestas magna arcu, vitae porta leo mattis at. Donec non ante ligula. Morbi nec maximus libero. Curabitur euismod efficitur lorem at dignissim. Nulla imperdiet mi a est viverra congue.</p>
<p>Sed sit amet ornare enim. Sed vestibulum est id ligula auctor lobortis. Vivamus facilisis ligula sed risus laoreet aliquam. Vestibulum cursus accumsan fringilla. Donec consequat massa quis justo tempor malesuada. Quisque elementum viverra lorem, sed vestibulum ipsum efficitur eu. Pellentesque sagittis condimentum justo, eu tristique ante imperdiet et.</p>
<p>Integer mauris ipsum, dictum sit amet nulla eget, fermentum rhoncus nulla. Mauris id magna mattis, imperdiet est vel, laoreet nisi. Morbi blandit arcu et porttitor condimentum. Morbi lobortis, quam vitae pretium vehicula, nisl magna sagittis nisi, ac pellentesque ligula erat a nunc. Aenean interdum tempus ante in sollicitudin. Aliquam vitae vehicula ligula, bibendum blandit arcu. Integer euismod ullamcorper neque in posuere. Proin sit amet quam neque. Sed bibendum neque ipsum, ut sodales ante aliquet eu. Maecenas ante elit, rutrum eu suscipit at, fringilla eget justo. Cras eu vehicula sapien. Aenean ullamcorper, eros in fermentum tristique, nulla urna lobortis velit, sed semper libero arcu sit amet risus. Nulla luctus imperdiet leo at laoreet. Vivamus luctus ultrices nisi, non sodales mi gravida malesuada.</p>
In hac habitasse platea dictumst. Duis mi nulla, blandit id augue non, imperdiet laoreet odio. Nunc tempor lectus vel tincidunt rutrum. Praesent vel laoreet arcu. Aenean a tincidunt urna. Suspendisse rutrum tempus sem ut egestas. Nam malesuada tellus nibh, eget convallis dolor egestas in. Donec nec accumsan quam. Pellentesque ultrices, ex vel feugiat finibus, ex dui imperdiet elit, eget ultrices sapien tortor dictum lectus. Aliquam sapien metus, faucibus ut elementum euismod, pulvinar sed velit. Ut facilisis fermentum nunc, a sagittis nulla tincidunt in. Ut volutpat facilisis nunc. Aenean nisl nisl, congue nec scelerisque in, euismod vitae libero. Mauris vehicula porta mattis.
</main>