$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() < 82) {
$("#header").css({
"height": 0,
"border-bottom": "none"
});
} else {
$("#header").css({
"height": "82px",
"border-bottom": "1px solid #333"
});
}
});
});
body {
margin: 0;
font-family: Helvetica, sans-serif;
}
#header {
display: flex;
justify-content: center;
align-items: center;
height: 0;
border-bottom: none;
background: rgba(0, 0, 0, 0.99);
transition: 0.5s all ease;
position: fixed;
top: 0;
width: 100%;
color: #fff;
}
#content {
line-height: 1.2;
font-size: 5em;
}
<div id="header">
<h3>I'm a header</h3>
</div>
<div id="content">
<h3>Scroll Down</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo purus, tempor id lobortis eget, pretium id lectus. Nam sed lorem quis velit efficitur gravida vel et enim. Ut laoreet sit amet enim ut tincidunt. Nunc vitae consectetur quam, ac varius
est. Ut ac sagittis nisi. Etiam luctus ullamcorper eros. Nam molestie consectetur risus, ac accumsan velit cursus efficitur. Phasellus porta neque ut arcu rutrum facilisis. Proin non imperdiet ante. Vestibulum elit augue, cursus et nulla id, volutpat
tincidunt ex. Nullam vitae nibh odio. Curabitur convallis sapien sit amet hendrerit vulputate. Phasellus sagittis suscipit augue nec congue. Pellentesque condimentum, eros vel auctor dapibus, velit enim sagittis nibh, sit amet efficitur erat sapien
ut turpis. Cras bibendum, ex ac elementum facilisis, neque libero lobortis nulla, id molestie lectus ex at felis. Praesent ut elementum dui, et vestibulum ipsum. Quisque in mi scelerisque, pharetra sem in, pellentesque ipsum. Nam ultrices, diam ac consectetur
viverra, nisl neque varius ante, vehicula semper ipsum velit at tellus. Sed velit massa, luctus id elit ut, volutpat rutrum erat. Nulla eu ipsum mauris. Etiam dictum viverra dui vel tempor.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>