<div class="header">  
  <div class="header-wrapper">  
    Header  
  </div>  
</div>  
  
<div class="content">  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Sagittis aliquam malesuada bibendum arcu vitae. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Nibh cras pulvinar mattis nunc. Libero nunc consequat interdum varius sit amet. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Porttitor lacus luctus accumsan tortor posuere ac ut. Odio ut sem nulla pharetra diam sit amet nisl. Faucibus scelerisque eleifend donec pretium. At tellus at urna condimentum. Arcu risus quis varius quam quisque id diam vel quam. Gravida dictum fusce ut placerat orci nulla. Amet nulla facilisi morbi tempus. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris.</p>
  <p>Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Vitae auctor eu augue ut lectus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Eget magna fermentum iaculis eu non diam phasellus. Platea dictumst quisque sagittis purus sit. Donec pretium vulputate sapien nec sagittis aliquam. Morbi blandit cursus risus at ultrices mi. A diam sollicitudin tempor id eu nisl nunc mi. Rhoncus dolor purus non enim praesent elementum facilisis leo. Condimentum mattis pellentesque id nibh. Ut consequat semper viverra nam libero justo laoreet sit. Pellentesque habitant morbi tristique senectus. Nulla facilisi morbi tempus iaculis urna id volutpat. Elementum integer enim neque volutpat ac tincidunt vitae semper quis.</p>
  <p>Id nibh tortor id aliquet lectus proin. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Enim praesent elementum facilisis leo. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est. Vel fringilla est ullamcorper eget nulla facilisi. Fames ac turpis egestas sed tempus urna et pharetra. Nam libero justo laoreet sit amet cursus sit. Elementum integer enim neque volutpat ac tincidunt vitae semper. Morbi quis commodo odio aenean sed adipiscing diam donec. Imperdiet nulla malesuada pellentesque elit. Varius duis at consectetur lorem donec massa.</p>
  <p>Cursus vitae congue mauris rhoncus. Risus pretium quam vulputate dignissim suspendisse in. Ut venenatis tellus in metus vulputate eu. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Volutpat maecenas volutpat blandit aliquam. Sed velit dignissim sodales ut eu. Hac habitasse platea dictumst vestibulum rhoncus. Magna sit amet purus gravida quis blandit turpis. Ut consequat semper viverra nam libero justo laoreet sit. Neque vitae tempus quam pellentesque. Adipiscing enim eu turpis egestas pretium aenean. Augue eget arcu dictum varius duis at consectetur. Viverra ipsum nunc aliquet bibendum. Fringilla urna porttitor rhoncus dolor. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Quisque non tellus orci ac auctor augue mauris. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor.</p>
  <p>Sed pulvinar proin gravida hendrerit lectus. Purus gravida quis blandit turpis cursus. Duis tristique sollicitudin nibh sit amet. Et egestas quis ipsum suspendisse. Eu augue ut lectus arcu bibendum at varius vel pharetra. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Eget duis at tellus at urna condimentum. Cursus risus at ultrices mi tempus imperdiet. Eget est lorem ipsum dolor sit amet consectetur adipiscing. Tempor nec feugiat nisl pretium fusce id velit ut. Suspendisse interdum consectetur libero id faucibus nisl tincidunt. Hendrerit gravida rutrum quisque non tellus orci ac. In vitae turpis massa sed elementum tempus egestas sed. Nec ultrices dui sapien eget mi. Purus gravida quis blandit turpis cursus. Quis auctor elit sed vulputate mi. Nulla aliquet porttitor lacus luctus.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Sagittis aliquam malesuada bibendum arcu vitae. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Nibh cras pulvinar mattis nunc. Libero nunc consequat interdum varius sit amet. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Porttitor lacus luctus accumsan tortor posuere ac ut. Odio ut sem nulla pharetra diam sit amet nisl. Faucibus scelerisque eleifend donec pretium. At tellus at urna condimentum. Arcu risus quis varius quam quisque id diam vel quam. Gravida dictum fusce ut placerat orci nulla. Amet nulla facilisi morbi tempus. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris.</p>
  <p>Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Vitae auctor eu augue ut lectus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Eget magna fermentum iaculis eu non diam phasellus. Platea dictumst quisque sagittis purus sit. Donec pretium vulputate sapien nec sagittis aliquam. Morbi blandit cursus risus at ultrices mi. A diam sollicitudin tempor id eu nisl nunc mi. Rhoncus dolor purus non enim praesent elementum facilisis leo. Condimentum mattis pellentesque id nibh. Ut consequat semper viverra nam libero justo laoreet sit. Pellentesque habitant morbi tristique senectus. Nulla facilisi morbi tempus iaculis urna id volutpat. Elementum integer enim neque volutpat ac tincidunt vitae semper quis.</p>
  <p>Id nibh tortor id aliquet lectus proin. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Enim praesent elementum facilisis leo. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est. Vel fringilla est ullamcorper eget nulla facilisi. Fames ac turpis egestas sed tempus urna et pharetra. Nam libero justo laoreet sit amet cursus sit. Elementum integer enim neque volutpat ac tincidunt vitae semper. Morbi quis commodo odio aenean sed adipiscing diam donec. Imperdiet nulla malesuada pellentesque elit. Varius duis at consectetur lorem donec massa.</p>
  <p>Cursus vitae congue mauris rhoncus. Risus pretium quam vulputate dignissim suspendisse in. Ut venenatis tellus in metus vulputate eu. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Volutpat maecenas volutpat blandit aliquam. Sed velit dignissim sodales ut eu. Hac habitasse platea dictumst vestibulum rhoncus. Magna sit amet purus gravida quis blandit turpis. Ut consequat semper viverra nam libero justo laoreet sit. Neque vitae tempus quam pellentesque. Adipiscing enim eu turpis egestas pretium aenean. Augue eget arcu dictum varius duis at consectetur. Viverra ipsum nunc aliquet bibendum. Fringilla urna porttitor rhoncus dolor. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Quisque non tellus orci ac auctor augue mauris. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor.</p>
  <p>Sed pulvinar proin gravida hendrerit lectus. Purus gravida quis blandit turpis cursus. Duis tristique sollicitudin nibh sit amet. Et egestas quis ipsum suspendisse. Eu augue ut lectus arcu bibendum at varius vel pharetra. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Eget duis at tellus at urna condimentum. Cursus risus at ultrices mi tempus imperdiet. Eget est lorem ipsum dolor sit amet consectetur adipiscing. Tempor nec feugiat nisl pretium fusce id velit ut. Suspendisse interdum consectetur libero id faucibus nisl tincidunt. Hendrerit gravida rutrum quisque non tellus orci ac. In vitae turpis massa sed elementum tempus egestas sed. Nec ultrices dui sapien eget mi. Purus gravida quis blandit turpis cursus. Quis auctor elit sed vulputate mi. Nulla aliquet porttitor lacus luctus.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Sagittis aliquam malesuada bibendum arcu vitae. Tellus in hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Nibh cras pulvinar mattis nunc. Libero nunc consequat interdum varius sit amet. Tellus in hac habitasse platea dictumst vestibulum rhoncus. Porttitor lacus luctus accumsan tortor posuere ac ut. Odio ut sem nulla pharetra diam sit amet nisl. Faucibus scelerisque eleifend donec pretium. At tellus at urna condimentum. Arcu risus quis varius quam quisque id diam vel quam. Gravida dictum fusce ut placerat orci nulla. Amet nulla facilisi morbi tempus. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris.</p>
  <p>Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Vitae auctor eu augue ut lectus. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Eget magna fermentum iaculis eu non diam phasellus. Platea dictumst quisque sagittis purus sit. Donec pretium vulputate sapien nec sagittis aliquam. Morbi blandit cursus risus at ultrices mi. A diam sollicitudin tempor id eu nisl nunc mi. Rhoncus dolor purus non enim praesent elementum facilisis leo. Condimentum mattis pellentesque id nibh. Ut consequat semper viverra nam libero justo laoreet sit. Pellentesque habitant morbi tristique senectus. Nulla facilisi morbi tempus iaculis urna id volutpat. Elementum integer enim neque volutpat ac tincidunt vitae semper quis.</p>
  <p>Id nibh tortor id aliquet lectus proin. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Enim praesent elementum facilisis leo. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est. Vel fringilla est ullamcorper eget nulla facilisi. Fames ac turpis egestas sed tempus urna et pharetra. Nam libero justo laoreet sit amet cursus sit. Elementum integer enim neque volutpat ac tincidunt vitae semper. Morbi quis commodo odio aenean sed adipiscing diam donec. Imperdiet nulla malesuada pellentesque elit. Varius duis at consectetur lorem donec massa.</p>
  <p>Cursus vitae congue mauris rhoncus. Risus pretium quam vulputate dignissim suspendisse in. Ut venenatis tellus in metus vulputate eu. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Volutpat maecenas volutpat blandit aliquam. Sed velit dignissim sodales ut eu. Hac habitasse platea dictumst vestibulum rhoncus. Magna sit amet purus gravida quis blandit turpis. Ut consequat semper viverra nam libero justo laoreet sit. Neque vitae tempus quam pellentesque. Adipiscing enim eu turpis egestas pretium aenean. Augue eget arcu dictum varius duis at consectetur. Viverra ipsum nunc aliquet bibendum. Fringilla urna porttitor rhoncus dolor. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Quisque non tellus orci ac auctor augue mauris. Interdum varius sit amet mattis vulputate enim nulla aliquet porttitor.</p>
  <p>Sed pulvinar proin gravida hendrerit lectus. Purus gravida quis blandit turpis cursus. Duis tristique sollicitudin nibh sit amet. Et egestas quis ipsum suspendisse. Eu augue ut lectus arcu bibendum at varius vel pharetra. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Eget duis at tellus at urna condimentum. Cursus risus at ultrices mi tempus imperdiet. Eget est lorem ipsum dolor sit amet consectetur adipiscing. Tempor nec feugiat nisl pretium fusce id velit ut. Suspendisse interdum consectetur libero id faucibus nisl tincidunt. Hendrerit gravida rutrum quisque non tellus orci ac. In vitae turpis massa sed elementum tempus egestas sed. Nec ultrices dui sapien eget mi. Purus gravida quis blandit turpis cursus. Quis auctor elit sed vulputate mi. Nulla aliquet porttitor lacus luctus.</p>
</div>  
  
<div class="footer">  
  Footer  
</div>  
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.header {
  width: 100%;
  height: 52px;
  margin: 0 auto;
  
  &-wrapper {
    width: 70%;
    height: 52px;
    font: 24px/24px "Verdana";
    position: fixed;
    left: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ccc;
    transform: translate(-50%, 0);
    transition: all 550ms ease-in-out;
    
    &.fixed {
      transform: translate(-50%, -100%);
    }
  }
}

.content {
  width: 70%;
  margin: 0 auto;
  padding: 16px;
  
  p {
    font: 16px/24px "Verdana";
  }
}

.footer {
  width: 70%;
  margin: 0 auto;
  padding: 16px;
  text-align: center;
  font: 24px/24px "Verdana";
  background: #ccc;
}
View Compiled
var header = $('.header-wrapper'),
	scrollPrev = 0;

  $(window).on('scroll', function() {
    var scrolled = $(window).scrollTop();
  
    if ( scrolled > 0 && scrolled > scrollPrev ) {
      header.addClass('fixed');
    } else {
      header.removeClass('fixed');
    }
    scrollPrev = scrolled;
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js