Shrinking Sticky Header

<div class="sf-scroll" id="sfScroll"><div class="sf-head" id="sfHead"><b>Acme</b><span>scroll ↓</span></div><div class="sf-content"><p>Scroll down — the header above shrinks and gains a shadow once you move past the top.</p><div style="height:200px"></div><p>This is the on-scroll sticky-header pattern used across modern sites.</p><div style="height:200px"></div><p>Scroll back up to expand it again.</p></div></div>

body{background:#f6f7fa}
.sf-scroll{width:320px;height:260px;overflow:auto;background:#fff;border:1px solid #eceef3;border-radius:16px;font-family:system-ui,sans-serif}
.sf-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:22px 18px;background:#fff;transition:.3s;z-index:2}
.sf-head b{font-size:24px;color:#1a1f36;transition:.3s}
.sf-head span{color:#8a93ad;font-size:13px}
.sf-head.shrink{padding:12px 18px;box-shadow:0 4px 16px rgba(20,25,50,.1)}
.sf-head.shrink b{font-size:18px}
.sf-content{padding:0 18px 18px;color:#5a627a;line-height:1.7}

var s=document.getElementById('sfScroll'),h=document.getElementById('sfHead');
s.addEventListener('scroll',function(){h.classList.toggle('shrink',s.scrollTop>20)});