目次追従ハイライト

<div class="d06-02-01-wrap">
          <nav class="d06-02-01-toc">
            <a href="#" data-t="s06-02-01-1" class="is-active">はじめに</a>
            <a href="#" data-t="s06-02-01-2">背景と課題</a>
            <a href="#" data-t="s06-02-01-3">具体的な手順</a>
            <a href="#" data-t="s06-02-01-4">注意点</a>
            <a href="#" data-t="s06-02-01-5">まとめ</a>
          </nav>
          <div class="d06-02-01-body">
            <section id="s06-02-01-1"><h4>はじめに</h4><p>この記事では基本的な考え方を解説します。スクロールに応じて左の目次が追従します。全体像を先につかむと理解が早まります。</p></section>
            <section id="s06-02-01-2"><h4>背景と課題</h4><p>従来の方法には手間の多さという課題がありました。読者がどこを読んでいるかを可視化することで、長文でも迷子になりません。</p></section>
            <section id="s06-02-01-3"><h4>具体的な手順</h4><p>まず準備を整え、次に設定を行い、最後に確認します。段階を分けることで再現性が高まり、ミスも減らせます。</p></section>
            <section id="s06-02-01-4"><h4>注意点</h4><p>環境によって挙動が変わる場合があります。事前にバックアップを取り、少しずつ反映すると安全です。</p></section>
            <section id="s06-02-01-5"><h4>まとめ</h4><p>要点を押さえれば難しくありません。目次追従は長文記事の読みやすさを大きく高めてくれます。</p></section>
          </div>
        </div>

.prev.d06-02-01{padding:0;display:block}
        .d06-02-01-wrap{display:flex;height:260px;font-size:12px}
        .d06-02-01-toc{flex:0 0 108px;background:#f5f6fb;border-right:1px solid #e6e8f0;padding:12px 8px;overflow-y:auto}
        .d06-02-01-toc a{display:block;padding:6px 8px;margin-bottom:3px;color:#7a8095;text-decoration:none;border-radius:5px;border-left:3px solid transparent;transition:.25s;font-size:11px;line-height:1.3}
        .d06-02-01-toc a.is-active{color:#3a49d6;background:#e8ebff;border-left-color:#3a49d6;font-weight:700}
        .d06-02-01-body{flex:1;overflow-y:auto;padding:14px 16px;scroll-behavior:smooth}
        .d06-02-01-body section{padding:6px 0 16px;border-bottom:1px dashed #eef0f5}
        .d06-02-01-body h4{margin:0 0 6px;font-size:13px;color:#242a3d}
        .d06-02-01-body p{margin:0;color:#666c80;line-height:1.7}

(function(){
        var root=document.getElementById('item-06-02-01');if(!root)return;
        var body=root.querySelector('.d06-02-01-body');
        var links=root.querySelectorAll('.d06-02-01-toc a');
        var secs=root.querySelectorAll('.d06-02-01-body section');
        links.forEach(function(a){a.addEventListener('click',function(e){e.preventDefault();var t=root.querySelector('#'+a.getAttribute('data-t'));if(t)body.scrollTop=t.offsetTop-body.offsetTop-8;});});
        function upd(){var st=body.scrollTop+40,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);});}
        body.addEventListener('scroll',upd);upd();
      })();