web-dev-qa-db-fra.com

Comment utiliser la position CSS collante pour garder une barre latérale visible avec Bootstrap 4

J'ai une disposition en deux colonnes comme celle-ci:

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4">
    </div>
 </div>

Si je règle le position:sticky dans la colonne de la barre latérale, j'obtiens le comportement collant de la barre latérale: https://codepen.io/marcanuy/pen/YWYZEp

CSS:

.sticky {
  position: sticky;
  top: 10px;
}

HTML:

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4 sticky">
    </div>
 </div>

Mais lorsque j'ai défini la propriété sticky uniquement dans le menu qui se trouve dans la barre latérale, donc la section articles connexes défile normalement et obtient le comportement collant avec le menu div, ça ne marche pas:

 <div class="row">
    <div class="col-xs-8 content"> 
    </div>
    <div class="col-xs-4">
       <div class="menu sticky">
       </div>
    </div>
 </div>

Ceci est la capture d'écran du premier exemple faisant défiler toute la barre latérale avec un comportement collant, puis en changeant la propriété collante dans le menu qui ne fonctionne pas:

enter image description here

Bootstrap 4 recommande la propriété collante comme support abandonné pour le plugin Affix jQuery:

Suppression du plugin Affix jQuery. Nous vous recommandons d'utiliser une position: polyfill collant à la place.

Je l'ai testé dans:

  • Firefox 47.0 avec css.sticky.enabled=“true” en dessous de about:config

  • Chrome 50.0.2661.94 (64 bits) avec experimental Web Platform features activé dans chrome://flags

(Ce n'est pas un doublon de Comment faire une barre latérale collante dans Bootstrap? parce que celui-ci utilise l'affixe BS)

csstwitter-bootstrapcss-positionbootstrap-4twitter-bootstrap-4
11
marcanuy

J'ai résolu d'activer flexbox. Après avoir soulevé un problème dans le référentiel Bootstrap Github , j'ai reçu une réponse par un Bootstrap membre :

Le .col-xs-4 n'est pas aussi grand que le .col-xs-8, donc il n'y a fondamentalement pas d'espace pour que le menu "flotte" à l'intérieur lorsque l'adhésivité entre en jeu. Rendez le .col-xs-4 plus grand et les choses fonctionnent bien: https://codepen.io/anon/pen/OXzoNJ Si vous activez la version Flexbox de notre système de grille (via $ enable-flex: true;), vous obtenez gratuitement des colonnes automatiques de hauteur égale, ce qui est pratique dans votre cas.

6
marcanuy

Dans la version stable Bootstrap 4.0.0 , cela se fait en utilisant le sticky-top classe ...

Démo

<div class="container">
    <nav class="navbar navbar-light bg-light navbar-expand">
        <a class="navbar-brand" href="#">Header</a>
        ...
    </nav>
    <div class="row">
        <div class="col-8 content">
            Content
        </div>
        <div class="col-4">
            <div class="sticky-top">
                <h4>Sticky menu</h4>
                ...
            </div>
        </div>
    </div>
    <div class="footer">
        ...
    </div>
</div>

Cela fonctionne même à la hauteur de l'en-tête/barre de navigation, le contenu et le pied de page sont dynamiques/inconnus.

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

9
Zim

La réponse de @wrldbt fonctionne jusqu'à bootstrap 4 alpha 5, mais en alpha 6 le -xs infix a été supprimé et la grille a été réécrite.

J'ai mis quelque chose ensemble, un peu plus propre, en travaillant avec la version actuelle de bootstrap et j'ai également inclus un pied de page collant utilisant flexbox.

https://codepen.io/cornex/pen/MJOOeb

1
eklundkristoffer

Explication Polyfill.

Vous devez inclure le polyfill JS pour l'utiliser. Les polyfills recommandés par le lien sur la page Bootstrap sont

Voici un codepen mis à jour: https://codepen.io/anon/pen/zBpNRk

J'ai inclus le polyfill requis (j'ai utilisé du stickyfill) et l'ai appelé avec

var stickyElements = document.getElementsByClassName('sticky');

for (var i = stickyElements.length - 1; i >= 0; i--) {
    Stickyfill.add(stickyElements[i]);
}

La bibliothèque vous a suggéré de l'utiliser pour votre CSS

.sticky {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
}
.sticky:before,
.sticky:after {
    content: '';
    display: table;
}

et enfin vous avez confondu l'ordre div. Vous devez mettre le div avec la classe collante à l'extérieur d'une ligne entière, j'ai donc rempli le reste de la ligne avec un autre <div class="col-xs-6"></div> qui est vide.

1
wrldbt