Navscroll

<div class="grid h-[28rem] grid-cols-1 gap-8 overflow-y-auto scroll-smooth rounded-box border border-base-content/15 p-6 lg:grid-cols-[16rem_1fr]">
  <aside class="lg:sticky lg:top-0 lg:self-start">
    <nav aria-label="Indice della pagina" class="ita-navscroll">
  <details>
    <summary>
      <span>Indice della pagina</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="11.6,15.4 6,9.8 6.7,9 11.6,13.9 16.5,9 17.2,9.8" /></svg>
    </summary>
    <div>
      <p class="ita-navscroll-title" aria-hidden="true">Indice della pagina</p>
      <div class="ita-navscroll-progress" aria-hidden="true"><div class="it-scroll-progress"></div></div>
      <ul>
    <li><a href="#ns-descrizione">Descrizione</a></li>
    <li><a href="#ns-destinatari">A chi è rivolto</a></li>
    <li><a href="#ns-come-fare">Come fare</a>
      <ul>
        <li><a href="#ns-online">Online</a></li>
        <li><a href="#ns-sportello">Allo sportello</a></li>
      </ul>
    </li>
    <li><a href="#ns-costi">Costi</a></li>
    <li><a href="#ns-contatti">Contatti</a></li>
      </ul>
    </div>
  </details>
</nav>
  </aside>
  <div>
    <section id="ns-descrizione" class="scroll-mt-4 pb-10">
      <h2 class="mb-3 text-2xl font-bold">Descrizione</h2>
      <p class="mb-3">Testo di esempio per la sezione «Descrizione». Scorri il riquadro: l'indice evidenzia la sezione visibile e la barra mostra quanto hai letto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </section>
    <section id="ns-destinatari" class="scroll-mt-4 pb-10">
      <h2 class="mb-3 text-2xl font-bold">A chi è rivolto</h2>
      <p class="mb-3">Testo di esempio per la sezione «A chi è rivolto». Scorri il riquadro: l'indice evidenzia la sezione visibile e la barra mostra quanto hai letto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </section>
    <section id="ns-come-fare" class="scroll-mt-4 pb-10">
      <h2 class="mb-3 text-2xl font-bold">Come fare</h2>
      <p class="mb-3">Testo di esempio per la sezione «Come fare». Scorri il riquadro: l'indice evidenzia la sezione visibile e la barra mostra quanto hai letto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </section>
    <section id="ns-online" class="scroll-mt-4 pb-10">
      <h3 class="mb-2 text-xl font-bold">Online</h3>
      <p class="mb-3">Testo di esempio per la sezione «Online». Scorri il riquadro: l'indice evidenzia la sezione visibile e la barra mostra quanto hai letto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </section>
    <section id="ns-sportello" class="scroll-mt-4 pb-10">
      <h3 class="mb-2 text-xl font-bold">Allo sportello</h3>
      <p class="mb-3">Testo di esempio per la sezione «Allo sportello». Scorri il riquadro: l'indice evidenzia la sezione visibile e la barra mostra quanto hai letto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </section>
    <section id="ns-costi" class="scroll-mt-4 pb-10">
      <h2 class="mb-3 text-2xl font-bold">Costi</h2>
      <p class="mb-3">Testo di esempio per la sezione «Costi». Scorri il riquadro: l'indice evidenzia la sezione visibile e la barra mostra quanto hai letto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </section>
    <section id="ns-contatti" class="scroll-mt-4 pb-10">
      <h2 class="mb-3 text-2xl font-bold">Contatti</h2>
      <p class="mb-3">Testo di esempio per la sezione «Contatti». Scorri il riquadro: l'indice evidenzia la sezione visibile e la barra mostra quanto hai letto.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </section>
  </div>
</div>

<div class="max-w-xs"><nav aria-label="Indice della pagina" class="ita-navscroll">
  <details>
    <summary>
      <span>Indice della pagina</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><polygon points="11.6,15.4 6,9.8 6.7,9 11.6,13.9 16.5,9 17.2,9.8" /></svg>
    </summary>
    <div>
      <p class="ita-navscroll-title" aria-hidden="true">Indice della pagina</p>
      <ul>
    <li><a href="#panoramica">Panoramica</a></li>
    <li><a href="#documenti" aria-current="true">Documenti richiesti</a></li>
    <li><a href="#tempi">Tempi e scadenze</a></li>
      </ul>
    </div>
  </details>
</nav></div>