web-dev-qa-db-fra.com

Bootstrap 4 fixe top nav et barre latérale fixe

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>

https://www.codeply.com/go/LFd2SEMECH

twitter-bootstrapbootstrap-4navbarsidebarsticky
7
user3691644

Le sticky-topest fonctionne, mais il ne semble pas fonctionner pour deux raisons ...

  1. Il n'y a pas assez de contenu dans la zone de contenu principale pour faire défiler
  2. Il est positionné à top:0 de sorte qu'il se cache derrière la barre de navigation fixe

Ajoutez 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>
11
Zim

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

0
mate.gwozdz