Comment utiliser CSS position collant à garder une barre latérale visible avec Bootstrap 4

J'ai deux colonnes de mise en page comme ceci:

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

Si j'ai mis le position:sticky à la barre latérale de la colonne, j'ai le collant comportement 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 quand j'ai mis le sticky propriété seulement à la menu qui se trouve dans la barre latérale, de sorte que le articles connexes section défile normalement et obtient le collant comportement avec le menu div, il ne fonctionne pas:

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

C'est le screencast de le premier exemple de défilement de l'ensemble de la barre latérale avec un collant comportement, et puis en modifiant la propriété collante au menu qui ne fonctionne pas:

Bootstrap 4 recommande la collant bien que les abandonné la prise en charge de l'Affixe plugin jQuery:

Abandonné l'Affixe plugin jQuery. Nous recommandons l'utilisation d'un position: collant polyfill de la place.

Je l'ai testé dans:

Firefox 47.0 avec css.sticky.enabled=“true” sous about:config
Chrome 50.0.2661.94 (64-bit) avec experimental Web Platform features activé dans chrome://flags

(Ce n'est pas un doublon de Comment faire un collant dans la barre latérale de Bootstrap? parce que l'on est en utilisant BS apposer)

Êtes-vous essayer quelque chose de ce genre - codepen.io/nagasai/stylo/NAXgXQ
Non, je veux le collant effet est décrit ici: developer.mozilla.org/en/docs/Web/CSS/position à la Place des lettres, la barre latérale doit commencer par une position relative et de changer pour un fixe.
donc pas de jQuery ou javascript?
Pas de javascript, uniquement avec le navigateur natif position:sticky de soutien.

OriginalL'auteur marcanuy | 2016-07-14

Dans l'étable Bootstrap 4.0.0 de presse, ce qui est fait à l'aide de la 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/inconnu.

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

Collant-haut sur la barre latérale fonctionne, mais ne semble pas compte de ce qui se passe si le volet contenu est plus grand que la fenêtre d'affichage. Dans ce scénario, le volet contenu ne peut pas être affiché dans la visibilité jusqu'à ce que l'utilisateur fait défiler à la fin du "contenu" du contenu.

OriginalL'auteur Zim

6

J'ai résolu permettant flexbox. Après avoir soulevé une question dans le Bootstrap est Github référentiel, j'ai eu une réponse par un Bootstrap membre:

L' .col-xs-4 n'est pas aussi grand que l' .col-xs-8, donc il n'y a fondamentalement pas
de l'espace pour le Menu "flotter" à l'intérieur lorsque la viscosité des coups de pied dans.
Faire le .col-xs-4 plus grands 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: vrai;), vous obtenez automatiquement
l'égalité-hauteur des colonnes pour gratuit, ce qui est pratique dans votre cas.

OriginalL'auteur marcanuy
1

La réponse par @wrldbt des travaux de bootstrap 4 alpha 5, mais en alpha 6 la -xs infix a été abandonné et la grille ont été réécrits.

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

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

OriginalL'auteur eklundkristoffer
0

Polyfill explication.

Vous devez inclure le JS polyfill pour l'utiliser. Les polyfills recommandé par le lien sur le Bootstrap page sont
- https://github.com/wilddeer/stickyfill
- https://github.com/filamentgroup/fixed-sticky
Ici est une mise à jour de codepen: https://codepen.io/anon/pen/zBpNRk

J'ai inclus le nécessaire polyfill (j'ai utilisé stickyfill) et l'a appelé avec
```
var stickyElements = document.getElementsByClassName('sticky');

for (var i = stickyElements.length - 1; i >= 0; i--) {
    Stickyfill.add(stickyElements[i]);
}
```
La bibliothèque vous proposait de les utiliser pour votre css
```
.sticky {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
}
.sticky:before,
.sticky:after {
    content: '';
    display: table;
}
```
et, enfin, vous avez eu la div ordre mélangé. Vous avez besoin de mettre la div avec le collant classe en dehors d'une ligne entière, donc j'ai rempli le reste de la ligne avec un autre <div class="col-xs-6"></div> qui est vide.

Je suis à l'aide de navigateurs qui prend en charge position:sticky nativement comme précisé dans la question.

OriginalL'auteur wrldbt

Vous devez vous connecter pour publier un commentaire.