Aides

Positionnement

Quatre familles de classes fixent un élément en haut ou en bas de l’écran, ou le font coller au bord de son conteneur au défilement : .fixed-top, .fixed-bottom, .sticky-top et .sticky-bottom.

Les classes .fixed-* retirent l’élément du flux et l’accrochent à la fenêtre, sur toute la largeur. Les classes .sticky-* le laissent dans le flux, puis le font « coller » au bord choisi quand le défilement l’atteint. Pour placer un élément à un endroit précis (coin, centre…), voir les utilitaires de position.

En-tête fixé en haut#

.fixed-top colle la barre en haut de la page. Ce code n’est pas exécuté dans l’aperçu, car il sortirait de la page de documentation.

<div class="fixed-top text-bg-primary px-3 py-2">
  Espace client BDU CI
</div>

Barre d'actions fixée en bas#

.fixed-bottom convient à une barre d’actions toujours visible, par exemple pour valider un virement sur mobile.

<div class="fixed-bottom bg-body border-top p-3 d-flex justify-content-between align-items-center">
  <span class="fw-semibold">Total : 75 000 FCFA</span>
  <button type="button" class="btn btn-primary">Valider le virement</button>
</div>

Titre collant dans une liste#

.sticky-top garde le titre visible pendant que la liste défile. Faites défiler la zone ci-dessous.

Dernières opérations

Salaire de mars : + 420 000 FCFA
Loyer : − 150 000 FCFA
Électricité : − 32 500 FCFA
Eau : − 11 000 FCFA
Transfert épargne : − 100 000 FCFA
Marché : − 18 750 FCFA
Recharge mobile : − 5 000 FCFA
Remboursement prêt : − 85 000 FCFA

<div class="border overflow-auto" style="height: 12rem" tabindex="0" role="region" aria-label="Liste des comptes défilante">
  <div class="sticky-top text-bg-light border-bottom px-3 py-2 fw-semibold">Dernières opérations</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Salaire de mars : + 420 000 FCFA</li>
    <li class="list-group-item">Loyer : − 150 000 FCFA</li>
    <li class="list-group-item">Électricité : − 32 500 FCFA</li>
    <li class="list-group-item">Eau : − 11 000 FCFA</li>
    <li class="list-group-item">Transfert épargne : − 100 000 FCFA</li>
    <li class="list-group-item">Marché : − 18 750 FCFA</li>
    <li class="list-group-item">Recharge mobile : − 5 000 FCFA</li>
    <li class="list-group-item">Remboursement prêt : − 85 000 FCFA</li>
  </ul>
</div>

Pied collant en bas#

.sticky-bottom colle le total au bas de la zone visible tant que le contenu défile.

Mensualité 1 : 85 000 FCFA
Mensualité 2 : 85 000 FCFA
Mensualité 3 : 85 000 FCFA
Mensualité 4 : 85 000 FCFA
Mensualité 5 : 85 000 FCFA
Mensualité 6 : 85 000 FCFA

Total : 510 000 FCFA

<div class="border overflow-auto" style="height: 12rem" tabindex="0" role="region" aria-label="Liste des opérations défilante">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Mensualité 1 : 85 000 FCFA</li>
    <li class="list-group-item">Mensualité 2 : 85 000 FCFA</li>
    <li class="list-group-item">Mensualité 3 : 85 000 FCFA</li>
    <li class="list-group-item">Mensualité 4 : 85 000 FCFA</li>
    <li class="list-group-item">Mensualité 5 : 85 000 FCFA</li>
    <li class="list-group-item">Mensualité 6 : 85 000 FCFA</li>
  </ul>
  <div class="sticky-bottom text-bg-light border-top px-3 py-2 fw-semibold">Total : 510 000 FCFA</div>
</div>

Variantes responsives#

Seules les classes collantes ont des versions par point de rupture : l’élément devient collant à partir de la largeur indiquée. Voir les points de rupture.

<!-- Collant seulement à partir de md, normal en dessous -->
<aside class="sticky-md-top">…</aside>

<!-- Pied collant à partir de lg -->
<footer class="sticky-lg-bottom">…</footer>

Classes et variables

Classes et variables
Classe	Effet	Z-index
`.fixed-top`	`position: fixed`, collé en haut, sur toute la largeur	`$zindex-fixed` (1030)
`.fixed-bottom`	`position: fixed`, collé en bas, sur toute la largeur	`$zindex-fixed` (1030)
`.sticky-top`	`position: sticky` avec `top: 0`	`$zindex-sticky` (1020)
`.sticky-bottom`	`position: sticky` avec `bottom: 0`	`$zindex-sticky` (1020)
`.sticky-{sm, md, lg, xl, xxl}-top`	Idem, à partir du point de rupture	`$zindex-sticky`
`.sticky-{sm, md, lg, xl, xxl}-bottom`	Idem, à partir du point de rupture	`$zindex-sticky`

Bonnes pratiques

À faire

Réservez de la place au contenu : une barre fixée recouvre ce qui est dessous, ajoutez un padding ou une marge équivalente.
Prévoyez un .sticky-top dans une zone qui défile : il se bloque dans le conteneur défilant le plus proche.

À éviter

N’empilez pas plusieurs barres fixées : sur mobile, elles mangent l’écran.
Ne comptez pas sur .sticky-top dans un parent avec overflow: hidden : il ne collera pas.

Accessibilité

Un élément fixé peut masquer le champ qui reçoit le focus : vérifiez à la navigation au clavier et au zoom à 200 %.
Gardez les barres fixées petites, pour ne pas gêner la lecture ni les utilisateurs de loupe d’écran.