C'est un excellent exemple de la création d'une barre de navigation avec une barre latérale. Quelqu'un peut-il modifier le code de sorte que la barre de navigation supérieure soit fixée en haut et la barre latérale fixe/statique avec uniquement le défilement du contenu de la page principale? Je peux faire en sorte que la navigation soit corrigée en attribuant le class="fixed-top"
à la nav
, mais je ne vois pas comment fixer la barre latérale de manière à ce qu'elle reste au même endroit au lieu de faire défiler le contenu de la page principale. L'application de class="sticky-top"
à la barre latérale ne semble pas fonctionner.
<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
..
</nav>
<div class="row">
<div id="sidebar-container" class="sidebar-expanded d-none d-md-block">
<ul class="list-group sticky-top">
<li>Menu item..</li>
<li>Menu item..</li>
</ul>
</div>
<div class="col">
<!-- MAIN -->
</div>
</div>
Le sticky-top
est fonctionne, mais il ne semble pas fonctionner pour deux raisons ...
top:0
de sorte qu'il se cache derrière la barre de navigation fixeAjoutez CSS pour décaler le haut de la barre latérale (identique à la hauteur de la barre de navigation fixe).
.sticky-offset {
top: 56px;
}
<ul class="list-group sticky-top sticky-offset">..(sidebar)..</div>
Et ajoutez ensuite suffisamment de contenu (ou de hauteur) dans la zone principale pour que le défilement soit nécessaire ...
Démo de travail:https://www.codeply.com/go/7XYosZ7VH5
<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
..
</nav>
<div class="row">
<div id="sidebar-container" class="sidebar-expanded col-2 d-none d-md-block">
<ul class="list-group sticky-top sticky-offset">
<li>Menu item..</li>
<li>Menu item..</li>
</ul>
</div>
<div class="col">
<!-- MAIN -->
</div>
</div>
Il existe une propriété de position CSS relativement nouvelle appelée sticky
.
position: sticky;
top: 4em;
Voyez comment cela fonctionne, que se passe-t-il lorsque vous faites défiler jusqu'à la fin de l'élément parent. Laissez la hauteur à auto
. Référence - https://developer.mozilla.org/en-US/docs/Web/CSS/position