Reading Scroll Progress

<div class="sc-bar" id="bar"></div>
<div class="sc-wrap" id="wrap">
  <h3>Scroll inside me ↓</h3>
  <p>The bar at the top tracks how far you've scrolled through this content. It's a single element driven by a scroll listener — perfect for long articles and reading progress.</p>
  <p>Keep scrolling to watch it fill. This pattern is used on blogs, documentation and news sites to give readers a sense of position.</p>
  <p>Almost there — the gradient bar reaches 100% exactly when you hit the bottom of the scroll container.</p>
  <p>End of content. Scroll back up and the bar rewinds smoothly.</p>
</div>

*{box-sizing:border-box}
.sc-bar{position:sticky;top:0;height:5px;width:0;background:linear-gradient(90deg,#ff7a18,#ff477e);border-radius:0 4px 4px 0;z-index:5}
.sc-wrap{width:380px;max-width:100%;height:240px;overflow:auto;background:#fff;border:1px solid #eceef3;border-radius:0 0 14px 14px;padding:20px;font-family:system-ui,sans-serif}
.sc-wrap h3{margin:0 0 12px;color:#1a1f36}
.sc-wrap p{color:#5a627a;line-height:1.7;margin:0 0 16px}

var wrap=document.getElementById('wrap'),bar=document.getElementById('bar');
wrap.addEventListener('scroll',function(){
  var max=wrap.scrollHeight-wrap.clientHeight;
  bar.style.width=(max>0?wrap.scrollTop/max*100:0)+'%';
});