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:
Après le défilement:
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>
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
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.