縦スクロールプログレス+目次追従

<div class="doc">
          <ul class="toc">
            <li data-t="s11-02-05-1" class="on">はじめに</li>
            <li data-t="s11-02-05-2">特長</li>
            <li data-t="s11-02-05-3">料金</li>
            <li data-t="s11-02-05-4">まとめ</li>
          </ul>
          <div class="scroll">
            <section id="s11-02-05-1"><h4>はじめに</h4><p>スクロールに応じて左の目次が追従してハイライトされます。</p></section>
            <section id="s11-02-05-2"><h4>特長</h4><p>現在地が一目で分かるため長い記事でも迷いません。</p></section>
            <section id="s11-02-05-3"><h4>料金</h4><p>シンプルで分かりやすいプラン設計になっています。</p></section>
            <section id="s11-02-05-4"><h4>まとめ</h4><p>ぜひお気軽にお問い合わせください。</p></section>
          </div>
        </div>

.d11-02-05 .doc{display:flex;gap:14px;width:270px;height:200px}
        .d11-02-05 .toc{list-style:none;margin:0;padding:0;width:88px;flex:none;display:flex;flex-direction:column;gap:4px}
        .d11-02-05 .toc li{font-size:12px;color:#999;padding:6px 8px;border-left:2px solid transparent;cursor:pointer;transition:.25s}
        .d11-02-05 .toc li.on{color:#5b6ef5;border-color:#5b6ef5;background:#f2f3fb;font-weight:700}
        .d11-02-05 .scroll{flex:1;overflow-y:auto;border-radius:10px;background:#fafaff;padding:0 12px}
        .d11-02-05 .scroll section{padding:16px 0;min-height:130px;border-bottom:1px solid #eee}
        .d11-02-05 .scroll h4{margin:0 0 6px;font-size:14px;color:#26264a}
        .d11-02-05 .scroll p{margin:0;font-size:12px;color:#666;line-height:1.7}

(function(){
        var r=document.querySelector('#item-11-02-05 .d11-02-05');
        var scroll=r.querySelector('.scroll'),secs=r.querySelectorAll('section'),lis=r.querySelectorAll('.toc li');
        scroll.addEventListener('scroll',function(){
          var st=scroll.scrollTop+scroll.clientHeight/3,cur=0;
          secs.forEach(function(s,n){if(s.offsetTop<=st)cur=n;});
          lis.forEach(function(l,n){l.classList.toggle('on',n===cur);});
        });
      })();