粘性页头 Sticky Header 吸顶效果

html

<p style="margin-bottom:100px;">Scroll this page.</p>
<div class="sticky">
  <h3>Super amazing header</h3>
</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>

css

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)

html

<div class="wrap"></div>
<div class="pin">hello</div>

css

* {
  margin: 0;
  padding: 0;
}
.wrap {
  height: calc(100vh + 100px);
  background-color: pink;
}
.pin {
  width: 100%;
  height: 50px;
  position: fixed;
  top: -50px;
  left: 0;
  transition: 0.3s all;
  transform: translateZ(0);
  background-color: rgba(0, 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)