現在地ハイライト目次サイドバー

<div class="d06-09-01-wrap">
          <nav class="d06-09-01-toc">
            <span class="d06-09-01-track"><span class="d06-09-01-track-fill"></span></span>
            <a href="#" data-t="s06-09-01-1" class="is-active">はじめに</a>
            <a href="#" data-t="s06-09-01-2">現状の課題</a>
            <a href="#" data-t="s06-09-01-3">解決のステップ</a>
            <a href="#" data-t="s06-09-01-4">実践のポイント</a>
            <a href="#" data-t="s06-09-01-5">まとめ</a>
          </nav>
          <div class="d06-09-01-body">
            <section id="s06-09-01-1"><h4>はじめに</h4><p>この記事では読了率を高める目次設計を解説します。左のラインが読み進めた分だけ伸びていきます。</p></section>
            <section id="s06-09-01-2"><h4>現状の課題</h4><p>長文記事は読者が今どこにいるか分からず離脱しがちです。位置の可視化が重要になります。</p></section>
            <section id="s06-09-01-3"><h4>解決のステップ</h4><p>見出しを整理し、目次と本文をリンクさせ、現在地を常にハイライトする仕組みを作ります。</p></section>
            <section id="s06-09-01-4"><h4>実践のポイント</h4><p>色のコントラストや余白を工夫し、目次自体が読みやすいことも大切です。</p></section>
            <section id="s06-09-01-5"><h4>まとめ</h4><p>現在地表示は読者の安心感を高め、最後まで読み切ってもらう助けになります。</p></section>
          </div>
        </div>

.prev.d06-09-01{padding:0;display:block}
        .d06-09-01-wrap{display:flex;height:260px;font-size:12px}
        .d06-09-01-toc{position:relative;flex:0 0 116px;background:#f5f6fb;border-right:1px solid #e6e8f0;padding:14px 10px 14px 20px;overflow-y:auto}
        .d06-09-01-track{position:absolute;left:9px;top:14px;bottom:14px;width:2px;background:#e2e4ee;border-radius:2px}
        .d06-09-01-track-fill{position:absolute;left:0;top:0;width:100%;height:0%;background:linear-gradient(180deg,#5b3df0,#9b5cf6);border-radius:2px;transition:height .25s}
        .d06-09-01-toc a{display:block;padding:5px 0;margin-bottom:4px;color:#7a8095;text-decoration:none;font-size:11px;line-height:1.3;transition:color .2s}
        .d06-09-01-toc a.is-active{color:#3a49d6;font-weight:700}
        .d06-09-01-body{flex:1;overflow-y:auto;padding:14px 16px;scroll-behavior:smooth}
        .d06-09-01-body section{padding:6px 0 16px;border-bottom:1px dashed #eef0f5}
        .d06-09-01-body h4{margin:0 0 6px;font-size:13px;color:#242a3d}
        .d06-09-01-body p{margin:0;color:#666c80;line-height:1.7}

(function(){
        var root=document.getElementById('item-06-09-01');if(!root)return;
        var body=root.querySelector('.d06-09-01-body');
        var links=root.querySelectorAll('.d06-09-01-toc a');
        var secs=root.querySelectorAll('.d06-09-01-body section');
        var fill=root.querySelector('.d06-09-01-track-fill');
        function upd(){
          var st=body.scrollTop+30,cur=secs[0].id;
          secs.forEach(function(s){if(s.offsetTop-body.offsetTop<=st)cur=s.id;});
          links.forEach(function(a){a.classList.toggle('is-active',a.getAttribute('data-t')===cur);});
          var max=body.scrollHeight-body.clientHeight;
          var pct=max>0?Math.min(100,(body.scrollTop/max)*100):0;
          fill.style.height=pct+'%';
        }
        body.addEventListener('scroll',upd);upd();
      })();