Componente

Sticky

Elementi che restano attaccati al bordo durante lo scorrimento: position: sticky di Tailwind, con ombra solo quando l'elemento è davvero bloccato grazie alle scroll-state container query.

Riferimento: <it-sticky>
Classi: ita-stickyita-sticky-bottomita-sticky-offset-smita-sticky-offset-mdita-sticky-offset-lgita-sticky-shadow
Solo CSS: <it-sticky> osserva lo scorrimento in JavaScript per aggiungere la classe is-sticky. Qui lo fa container-type: scroll-state con @container scroll-state(stuck: top) (Chrome 133+): l'ombra compare solo a elemento bloccato. Negli altri browser l'elemento resta sticky, senza ombra. Ricorda che sticky smette di funzionare se un antenato ha overflow: hidden.
Storybook: Apri le storie di Sticky

Barra in alto con ombra

Scorri il riquadro: la barra si blocca e compare l'ombra.

Contenuto sopra la barra.

Riepilogo della domanda

Paragrafo 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragrafo 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragrafo 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragrafo 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragrafo 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragrafo 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragrafo 7. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragrafo 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Mostra il codice HTML

<div class="h-80 overflow-y-auto rounded-box border border-base-content/15">
  <div class="p-4">
    <p class="mb-4">Contenuto sopra la barra.</p>
  </div>
  <div class="ita-sticky ita-sticky-shadow">
  <div><div class="flex items-center justify-between gap-4 border-b border-base-content/15 px-4 py-3"><span class="font-semibold">Riepilogo della domanda</span><button type="button" class="ita-btn ita-btn-primary ita-btn-xs"><span>Invia</span></button></div></div>
</div>
  <div class="p-4">
    <p class="mb-4">Paragrafo 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="mb-4">Paragrafo 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="mb-4">Paragrafo 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="mb-4">Paragrafo 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="mb-4">Paragrafo 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="mb-4">Paragrafo 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="mb-4">Paragrafo 7. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="mb-4">Paragrafo 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

Barra delle azioni in basso