記事上部・伸びる読了プログレスバー

<div class="d06-09-02-wrap">
          <div class="d06-09-02-track">
            <span class="d06-09-02-fill"></span>
            <span class="d06-09-02-cap">0%</span>
          </div>
          <div class="d06-09-02-body">
            <h4>読了率で記事を可視化する</h4>
            <p>上部のバーは読み進めた割合をリアルタイムに表示します。キャップに表示される数値も一緒に移動します。</p>
            <h4>なぜ有効なのか</h4>
            <p>残り分量が視覚的に分かることで、読者は最後まで読み切ろうという意識を持ちやすくなります。</p>
            <h4>実装のコツ</h4>
            <p>スクロール量に応じて幅を更新するだけのシンプルな仕組みで、負荷も軽く導入しやすい演出です。</p>
          </div>
        </div>

.prev.d06-09-02{padding:0;display:block}
        .d06-09-02-wrap{height:260px;display:flex;flex-direction:column}
        .d06-09-02-track{position:relative;height:6px;background:#eceef5;margin:22px 18px 0}
        .d06-09-02-fill{position:absolute;left:0;top:0;height:100%;width:0%;background:linear-gradient(90deg,#4f7cf7,#9b5cf6);border-radius:4px;transition:width .1s linear}
        .d06-09-02-cap{position:absolute;top:-24px;left:0%;transform:translateX(-50%);font-size:10px;font-weight:700;color:#fff;
          background:#3a49d6;padding:2px 7px;border-radius:10px;white-space:nowrap;transition:left .1s linear}
        .d06-09-02-body{flex:1;overflow-y:auto;padding:16px 18px 18px;font-size:12px;line-height:1.8;color:#666c80}
        .d06-09-02-body h4{margin:0 0 6px;font-size:12.5px;color:#242a3d}
        .d06-09-02-body p{margin:0 0 14px}

(function(){
        var root=document.getElementById('item-06-09-02');if(!root)return;
        var body=root.querySelector('.d06-09-02-body');
        var fill=root.querySelector('.d06-09-02-fill');
        var cap=root.querySelector('.d06-09-02-cap');
        function upd(){
          var max=body.scrollHeight-body.clientHeight;
          var pct=max>0?Math.min(100,(body.scrollTop/max)*100):0;
          fill.style.width=pct+'%';
          cap.style.left=pct+'%';
          cap.textContent=Math.round(pct)+'%';
        }
        body.addEventListener('scroll',upd);upd();
      })();