Fixe la barre latérale de navigation fluide twitter bootstrap 2.0
Est-il possible de faire de la barre latérale de navigation rester toujours fixé sur faites défiler jusqu'disposition fluide?
Vous devez vous connecter pour publier un commentaire.
Est-il possible de faire de la barre latérale de navigation rester toujours fixé sur faites défiler jusqu'disposition fluide?
Vous devez vous connecter pour publier un commentaire.
Remarque: Il y a un bootstrap, jQuery plugin qui fait cela et beaucoup plus que a été introduit quelques versions après cette réponse a été écrit (presque deux ans), appelé Apposer. Cette réponse s'applique uniquement si vous êtes en utilisant Bootstrap 2.0.4 ou moins.
Oui, il suffit de créer un nouveau fixe de la classe de votre barre latérale et d'ajouter un décalage de classe à votre contenu de la div pour compenser la marge de gauche, comme ceci:
CSS
Démo: http://jsfiddle.net/U8HGz/1/show/
Edit: http://jsfiddle.net/U8HGz/1/
Mise à jour
Fixe mon démo à l'appui de la responsive bootstrap feuille, maintenant il coule avec le réactif fonction de l'amorçage.
Remarque: Cette démo flux avec le dessus de la barre de navigation fixe, de sorte que les deux éléments deviennent
position:static
sur redimensionnement de l'écran, j'ai placé une autre démo ci-dessous qui maintient la barre latérale fixe jusqu'à ce que l'écran de gouttes pour l'affichage mobile.CSS
HTML
Démo, modifier ici.
note mineure: il y a environ un 10px/1% de différence sur la largeur de la barre latérale fixe, de sa en raison du fait que, depuis, il n'a pas hérité de la largeur de la span3 div conteneur, car il est fixe, j'ai dû venir avec une largeur. Il est assez proche.
Et voici une autre méthode si vous voulez garder la barre latérale fixe jusqu'à ce que la grille de gouttes pour le petit écran/affichage mobile.
CSS
Démo, modifier ici.
margin-left:290px
déclaration sur l'.span-fixed-sidebar
classe faite pour faire de la place pour la barre latérale, si elle n'était pas là, le contenu de chevauchement de la barre latérale sur les petits écrans. Vous pouvez supprimer la barre de défilement horizontale si explicitement le cacher à l'body
la balise:body { overflow-x: hidden; }
.height:100%
si cela fonctionne pour vous) pour la.sidebar-nav-fixed
classe que j'ai créée en conjonction avec la propriétéoverflow-y:auto
.La dernière de Bootstrap (2.1.0) a une nouvelle JS "apposer" fonctionnalité spécifiquement pour ce type d'application, pour info.
cela va bousiller le responsive Webdesign.
Mieux envelopper le fixe la barre latérale dans une requête de média.
CSS
HTML
Maintenant la barre latérale n'est fixe, si le viewpot est plus grande que 768px.
Ce n'est pas possible sans javascript. Je trouve affix.js trop complexe, j'ai donc plutôt l'utilisation d':
stickyfloat
J'ai commencé avec Andres réponses et fini par trouver un collant barre latérale, comme ceci:
HTML:
CSS:
JS/jQuery:
Je suis en supposant que j'ai aussi besoin de JS pour mettre à jour la " sidebarwidth variable lorsque la fenêtre est redimensionnée.
Très facile de se fixer nav ou tout ce qui marque que vous voulez. Tous vous avez besoin est d'écrire votre correction de la balise comme ceci, et la mettre dans votre section de corps
Avec le courant de démarrage de la version (3.3.2) il y a une belle façon de parvenir à une barre latérale fixe pour la navigation.
Cette solution fonctionne aussi bien avec la ré-introduction du conteneur de liquide de classe, le sens qu'il est facilement possible d'avoir un réactif disposition de l'écran.
Normalement, vous auriez besoin d'utiliser des largeurs fixes et les marges ou la navigation sur le chevauchement du contenu, mais avec l'aide de l'espace réservé vide de la colonne, le contenu est toujours positionné à la bonne place.
Ci-dessous le programme d'installation encapsule le contenu lorsque vous redimensionnez la fenêtre à moins de 768px et libère le fixe de navigation.
Voir http://www.bootply.com/ePvnTy1VII pour un exemple.
CSS
HTML