Skip to main content

Bootstrap Italia

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

Sticky

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.

Elemento Sticky 
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.

Elemento Sticky con position fixed 
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

Elemento Sticky impilabile 
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.

Ente appartenenza
Nome dell'Istituzione
Tag line dell'Istituzione
 
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
84
85
86
87

<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:

1
2
3
4
5
6
7

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 . 
1
2
3
4

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