web-dev-qa-db-fra.com

Bootstrap 4, navbar fixed-top et autres éléments sticky-top

Voici la reproduction: https://jsbin.com/lawafu/edit?html,output

Est-ce un bug? Une erreur? Un problème? Une idée irréalisable?

Avant le défilement:  before

Après le défilement:  after

Ce dont j'ai besoin :

Évidemment, j'ai besoin de voir la barre latérale lorsque je fais défiler la page, en utilisant le rembourrage en haut du corps pour la barre de navigation en haut fixe.

J'utilise ce code pour la barre latérale:

<div class="sticky-top">
  <ul class="list-group">
    <li class="list-group-item active">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
htmlcsstwitter-bootstrapbootstrap-4sticky
7
user4412054

Bootstrap sticky-top n'a pas de décalage pour la Navbar car elle définit top:0. Vous pouvez ajouter une classe personnalisée pour tenir compte de la hauteur de la barre de navigation.

.sticky-offset {
    top: 56px;
}

<div class="sticky-top sticky-offset">
  <ul class="list-group">
    <li class="list-group-item active">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Démo: https://www.codeply.com/go/QeJOvbYswd

Connexes: Bootstrap 4 navigation supérieure fixe et barre latérale fixe

22
Zim

La réponse de Zim a été utile, mais n'a pas fonctionné pour moi dans Safari 12.0.1 sur MacOS (Chrome 70 était bien, a fonctionné comme prévu).

Je pense que c'est parce que sticky-top a une valeur top: 0px qui était prioritaire sur la classe personnalisée ajoutée.

Au lieu de cela, j'ai simplement ajouté:

.sticky-top{
  top:56px;
}

Ce qui l'a également corrigé dans Safari. De plus, il n'est pas nécessaire d'ajouter la classe personnalisée à la div.

1
dcsilver