web-dev-qa-db-fra.com

Comment créer un menu collant à gauche avec bootstrap 3?

Je veux créer un menu de barre collant à gauche avec bootstrap 3 comme:

http://getbootstrap.com/getting-started/

Je lirais la documentation fournie http://getbootstrap.com/javascript/#affix

J'essaie avec .affix mais le résultat est zéro.

Mise à jour : @Skelly,
Merci pour votre aimable exemple. et oui, je veux comme votre exemple. Je téléchargerais votre exemple HTML, mais après le téléchargement, la barre latérale du fichier HTML ne fonctionnait pas là-bas.

twitter-bootstraptwitter-bootstrap-3sidebarsticky
33
Sohag-Monist It

Bootstrap 3

Voici un exemple de barre latérale de travail:

http://bootply.com/90936 (similaire à la Bootstrap)

L'astuce consiste à utiliser le composant affix avec du code CSS pour le positionner:

  #sidebar.affix-top {
    position: static;
    margin-top:30px;
    width:228px;
  }

  #sidebar.affix {
    position: fixed;
    top:70px;
    width:228px;
  }

[~ # ~] éditer [~ # ~] - Un autre exemple avec pied de page et affix- en bas

Bootstrap 4

Le composant Affix a été supprimé dans Bootstrap 4, vous pouvez donc utiliser un plugin tiers Affix ((== --- ==)) comme ceci exemple de la barre latérale de Bootstrap 4 , ou utilisez le sticky-top class est expliqué dans cette réponse .

Connexes: Créer un "tiroir" de barre latérale de barre de navigation sensible dans Bootstrap 4?

47
Zim

Vous pouvez également essayer d’utiliser un Polyfill comme Fixed-Sticky . Surtout lorsque vous utilisez Bootstrap4, le composant affix est n'est plus inclus :

Supprimé le plugin Affix jQuery. Nous vous recommandons d'utiliser une position: sticky polyfill à la place.

6
H6.

J'ai utilisé cette façon dans mon code

$(function(){
    $('.block').affix();
})
4
Evgeniy