Sticky Header

<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>

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);

---

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

* {   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);

文章来源: Sticky Header