Fixed header w/ smooth show

by alexb

HTML

<header>Lorem ipsum dolor sit amet</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh sed pulvinar proin gravida hendrerit. Feugiat vivamus at augue eget arcu dictum. Pharetra sit amet aliquam id diam maecenas ultricies mi eget. Nulla facilisi etiam dignissim diam quis enim. Quis commodo odio aenean sed adipiscing diam. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Hendrerit gravida rutrum quisque non tellus. Ut diam quam nulla porttitor massa id neque aliquam vestibulum.
</p>
<p>
Eu sem integer vitae justo eget magna fermentum iaculis eu. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Ut faucibus pulvinar elementum integer. Vitae sapien pellentesque habitant morbi tristique senectus et. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Integer eget aliquet nibh praesent tristique magna sit amet purus. Vitae et leo duis ut diam quam nulla porttitor massa. Purus ut faucibus pulvinar elementum integer enim neque volutpat ac. Tellus id interdum velit laoreet id donec ultrices tincidunt. Tortor at auctor urna nunc id cursus metus aliquam. Pulvinar elementum integer enim neque volutpat ac tincidunt vitae semper. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Tellus elementum sagittis vitae et. Mauris in aliquam sem fringilla. Morbi quis commodo odio aenean sed. Aliquam sem fringilla ut morbi tincidunt augue interdum velit. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Quis imperdiet massa tincidunt nunc pulvinar. Pretium viverra suspendisse potenti nullam ac tortor vitae. Amet risus nullam eget felis eget.
</p>
<p>
Egestas erat imperdiet sed euismod nisi porta lorem. Eget egestas purus viverra accumsan in nisl. Cursus mattis molestie a iaculis at erat pellentesque. Mauris sit amet massa vitae tortor...

CSS

body {
  background: aliceblue;
  font: 20px/1.5 serif;
  margin: 0;
  min-height: 200vh;
}

header {
  background: royalblue;
  color: aliceblue;
  font-family: sans-serif;
  letter-spacing: 0.2em;
  padding: 1.5em;
  text-align: center;
  text-transform: uppercase;
}

p {
  padding: 0 1.5em;
  margin: 1em auto;
  max-width: 40em;
  text-align: justify;
  text-indent: 1.5em;
}

JavaScript

const headerElement = document.querySelector("header");
const headerHeight = headerElement.offsetHeight;
let prevScrollY = 0;

function onScroll() {
  const scrollY = window.scrollY;
  if (scrollY < prevScrollY) {
    const headerOffset = headerElement.offsetTop;
    if (headerOffset < scrollY - headerHeight) {
      headerElement.style.top = `${scrollY - headerHeight}px`;
    }
    else if (headerOffset > scrollY) {
      headerElement.style.top = `${scrollY}px`;
    }
  }
  prevScrollY = scrollY;
}

headerElement.style.position = "relative";
window.addEventListener("scroll", onScroll, { passive: true });


let prevScrollY = 0;

function onScroll() {
  const scrollY = window.scrollY;
  if (scrollY < prevScrollY) {
    // Scrolled up...
  }
  prevScrollY = scrollY;
}

window.addEventListener("scroll", onScroll, { passive: true });