Sticky Header 的两种实现方式

Header 默认显示在页面中，滑到某个位置时 sticky（CodePen预览）

<p style="margin-bottom:100px;">Scroll this page.p>
<div class="sticky">
  <h3>Super amazing headerh3>
div>
<p style="margin-top:500px;">Still there?p>
<p style="margin-top:500px;">Yep!p>
<p style="margin-top:500px;">Scroll so hard!p>

body {
  margin: 0;
  text-align: center;
  font-family: sans-serif;
}
.fixed {
  position: fixed;
  top: 0;
}
.sticky {
  width: 100%;
  background: #f6d565;
  padding: 25px 0;
  text-transform: uppercase;
}

const sticky = document.querySelector(".sticky");
const origOffsetY = sticky.offsetTop;

function onScroll() {
  sticky.classList.toggle("fixed", window.scrollY >= origOffsetY);
}

document.addEventListener("scroll", onScroll);

---

Header 默认不显示，滑到某个位置时显示并 sticky（CodePen预览）

<div class="wrap">div>
<div class="pin">hellodiv>

* {
  margin: 0;
  padding: 0;
}
.wrap {
  height: calc(100vh + 100px);
  background-color: pink;
}
.pin {
  width: 100%;
  height: 50px;
  position: fixed;
  top: -50px;
  left: 0;
  transition: .3s all;
  transform: translateZ(0);
  background-color: rgba(0, 0, 0, .5);
  visibility: hidden;
}
.pin.show {
  top: 0;
  visibility: visible;
}

const pin = document.querySelector('.pin');

function onScroll() {
  const scrollY = window.scrollY;
  pin.classList.toggle('show', scrollY >= 50);
}

window.addEventListener('scroll', onScroll);