Sticky

Rende un elemento della pagina costantemente visibile allo scorrere della pagina.

Talvolta è necessario che uno o più elementi della pagina restino sempre visibili anche quando essa viene fatta scorrere. Questo comportamento viene comunemente definito “sticky”.

Come funziona

Puoi usare l’attributo data-bs-toggle con valore sticky per attivare la funzionalità sull’elemento.

1
2
3
4
5
6
7
8
9
10
11
<div class="it-header-slim-wrapper" data-bs-toggle="sticky">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="it-header-slim-wrapper-content">
          <a class="d-none d-lg-block navbar-brand" href="#">Elemento Sticky</a>
        </div>
      </div>
    </div>
  </div>
</div>

È disponibile una pagina di esempio dedicata a questa funzionalità per comprenderne appieno significato ed utilizzo.

Position fixed

Il componente assegna all’elemento la proprietà CSS position con valore sticky. Talvolta questo valore può causare dei problemi di posizionamento, soprattutto quando l’elemento varia in altezza quando diventa sticky. Per questo è possibile forzare il valore fixed mediante l’attributo data-bs-position-type. Per facilitare il cambio di stile dell’elemento è possibile usare la proprietà data-bs-sticky-class-name: mediante questa proprietà la classe CSS indicata verrà assegnata all’elemento quando diventa sticky e rimossa quando ritorna normale.

1
2
3
4
5
6
7
8
9
10
11
<div class="it-header-slim-wrapper it-header-sticky" data-bs-toggle="sticky" data-bs-position-type="fixed" data-bs-target="#stickyTrigger1" data-bs-sticky-class-name="is-sticky">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="it-header-slim-wrapper-content">
          <a class="d-none d-lg-block navbar-brand" href="#">Elemento Sticky con position fixed</a>
        </div>
      </div>
    </div>
  </div>
</div>

È disponibile una pagina di esempio dedicata a questa funzionalità per comprenderne appieno significato ed utilizzo.

Versione impilabile

Se sono presenti più componenti sticky nella pagina, è possibile fare in modo che si impilino l’uno sull’altro utilizzando l’attributo data-bs-stackable

1
2
3
4
5
6
7
8
9
10
11
<div class="it-header-slim-wrapper" data-bs-toggle="sticky" data-bs-stackable="true">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="it-header-slim-wrapper-content">
          <a class="d-none d-lg-block navbar-brand" href="#">Elemento Sticky impilabile</a>
        </div>
      </div>
    </div>
  </div>
</div>

È disponibile una pagina di esempio dedicata a questa funzionalità per comprenderne appieno significato ed utilizzo.

Attivazione tramite target

È possibile attivare la funzionalità quando un particolare elemento interno esce dal viewport della pagina. In tal caso è necessario utilizzare l’attributo data-bs-target.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<header class="it-header-wrapper" data-bs-toggle="sticky"  data-bs-target="#stickyTrigger1">
  <div class="it-header-slim-wrapper">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="it-header-slim-wrapper-content">
            <a class="d-none d-lg-block navbar-brand" href="#">Ente appartenenza</a>
            <div class="nav-mobile">
              <nav aria-label="Navigazione secondaria">
                <a class="it-opener d-lg-none" data-bs-toggle="collapse" href="#menuC1" role="button" aria-expanded="false" aria-controls="menuC1">
                  <span>Ente appartenenza</span>
                  <svg class="icon" aria-hidden="true">
                    <use href="/dist/svg/sprites.svg#it-expand"></use>
                  </svg>
                </a>
                <div class="link-list-wrapper collapse" id="menuC1">
                  <ul class="link-list">
                    <li><a class="dropdown-item list-item" href="#">Link 1</a></li>
                    <li><a class="list-item active" href="#" aria-current="page">Link 2 (Attivo)</a></li>
                  </ul>
                </div>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="it-nav-wrapper">
    <div class="it-header-center-wrapper">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="it-header-center-content-wrapper">
              <div class="it-brand-wrapper">
                <a href="#">
                  <svg class="icon" aria-hidden="true">
                    <use href="/dist/svg/sprites.svg#it-pa"></use>
                  </svg>
                  <div class="it-brand-text">
                    <div class="it-brand-title">Nome dell'Istituzione</div>
                    <div class="it-brand-tagline d-none d-md-block">Tag line dell'Istituzione</div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="it-header-navbar-wrapper" id="stickyTrigger1">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <!--start nav-->
            <nav class="navbar navbar-expand-lg has-megamenu" aria-label="Navigazione principale">
              <button class="custom-navbar-toggler" type="button" aria-controls="navC1" aria-expanded="false" aria-label="Mostra/Nascondi la navigazione" data-bs-toggle="navbarcollapsible" data-bs-target="#navC1">
                <svg class="icon"><use href="/dist/svg/sprites.svg#it-burger"></use></svg>
              </button>
              <div class="navbar-collapsable" id="navC1" style="display: none;">
                <div class="overlay" style="display: none;"></div>
                <div class="close-div">
                  <button class="btn close-menu" type="button">
                    <span class="visually-hidden">Nascondi la navigazione</span>
                    <svg class="icon"><use href="/dist/svg/sprites.svg#it-close-big"></use></svg>
                  </button>
                </div>
                <div class="menu-wrapper">
                  <ul class="navbar-nav">
                    <li class="nav-item active"><a class="nav-link active" href="#" aria-current="page"><span>Link 1 (attivo)</span></a></li>
                    <li class="nav-item"><a class="nav-link disabled" href="#" aria-disabled="true"><span>Link 2 (disabilitato)</span></a></li>
                    <li class="nav-item"><a class="nav-link" href="#"><span>Link 3</span></a></li>
                    <li class="nav-item"><a class="nav-link" href="#"><span>Link 4</span></a></li>                    
                  </ul>
                </div>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

È disponibile una pagina di esempio dedicata a questa funzionalità per comprenderne appieno significato ed utilizzo.

Attivazione tramite JavaScript

È possibile creare un’istanza con il constructor, ad esempio:

var stickyElement = document.getElementById('sticky')
var sticky = new bootstrap.Sticky(stickyElement, {
  positionType: 'sticky',
  stickyClassName: 'is-sticky',
  stackable: true,
  paddingTop: 0,
})

Opzioni

Le opzioni possono essere passate tramite gli attributi data o tramite JavaScript. Per quanto riguarda gli attributi data, aggiungi il nome dell’opzione a data-bs, come in data-bs-position-type="".

Nome	Tipo	Predefinito	Descrizione
positionType	string	sticky	Indica il valore della proprietà CSS `position`. I valori ammessi sono `sticky` o `fixed`
stickyClassName	string		Classe CSS da applicare all'elemento quando viene attivata la funzionalità sticky
stackable	boolean	false	Attiva/disattiva la possibilità di rendere l'elemento impilabile su altri elementi sticky presenti in pagina
paddingTop	number	0	Indica la distanza dall'elemento in sticky dal margine superiore del viewport

Metodi

Metodo	Descrizione
dispose	Elimina la funzionalità sticky dell'elemento.
getInstance	Metodo statico che restituisce l'istanza Sticky associata ad un elemento del DOM. Esempio: `bootstrap.Sticky.getInstance(element)`
getOrCreateInstance	Metodo statico che restituisce un'istanza Sticky associata ad un elemento del DOM o ne crea una nuova nel caso non fosse stata inizializzata. Esempio: `bootstrap.Sticky.getOrCreateInstance(element)`

Eventi

La classe Sticky di Bootstrap espone alcuni eventi per agganciare comportamenti alla funzionalità di apertura/chiusura attraverso JavaScript.

Tipo di evento	Descrizione
on.bs.sticky	Questo evento si attiva immediatamente quando l'elemento è reso sticky.
off.bs.sticky	Questo evento viene attivato quando l'elemento .

var stickyElement = document.getElementById('sticky')
stickyElement.addEventListener('on.bs.sticky', function () {
  // do something...
})

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA

Sticky

Sticky

Come funziona

Position fixed

Versione impilabile

Attivazione tramite target

Attivazione tramite JavaScript

Opzioni

Metodi

Eventi