Fixer une barre latérale pendant le défilement jusqu'à ce que le pied de page est atteint (en utilisant Bootstrap classes)
Je suis en train de faire une barre de menu qui défile avec la page, et quand ses bas atteint le pied de page, il va arrêter le défilement et de rester en place.
Comme il est expliqué ici, et comme dans ce violon.
Le problème est, je suis en utilisant certains Bootstrap 3, et je crois que je ne peux pas obtenir le même résultat en raison de certaines de ses propriétés CSS. Au lieu de la barre latérale de rester en bas, il remonte après avoir atteint le pied de page.
C'est ma structure de mise.
<nav class="navbar"></nav>
<div class="container" id="wrapper">
<div class="row">
<div class="col-sm-8" id="blog-main"></div>
<div class="col-sm-4" id="blog-sidebar"></div>
</div>
</div>
<div id='blog-footer'></div>
Violon: https://jsfiddle.net/mpxrqwwf/7/
J'ai essayé de mettre blog-sidebar
à l'intérieur d'une enveloppe de div, avec position: absolute
sur elle et avec position: relative
sur les principaux wrapper, mais il s'est cassé la mise en page et le défilement encore n'a pas fonctionné comme je l'espérais. Merci d'avance pour l'aide.
Vous devez vous connecter pour publier un commentaire.
Bootstrap a une accumulation de plugin pour le faire pour vous, juste en ajoutant un couple d'attributs de données.
Apposer affix.js
Vous avez juste à définir un offset-dessus et un offset-bas via les attributs de l'élément que vous voulez être apposé. Basé sur vos valeurs de décalage, le plugin va ajouter et supprimer un couple de classes CSS lorsque le décalage est atteint pendant le défilement. Ces classes peut être adapté à vos besoins.
Si vous voulez plus de flexibilité, vous pouvez appeler l'affixe plugin via javaScript.
Ici est votre violon à l'aide de l'affixe plugin via des attributs de données:
CSS
HTML
.affix#blog-sidebar { width: 25.129%; } .affix-top#blog-sidebar, .affix-bottom#blog-sidebar { width: auto; }