Correction de la navigation dans la barre latérale dans Fluide Twitter Bootstrap 2.0

Est-il possible de faire en sorte que la navigation dans la barre latérale reste toujours fixe sur le défilement dans une mise en page fluide?

Remarque: il existe un plugin bootstrap jQuery qui fait cela et bien plus encore qui a été introduit quelques versions après que cette réponse ait été écrite (il y a presque deux ans) appelé Affix . Cette réponse ne s'applique que si vous utilisez Bootstrap 2.0.4 ou une version antérieure.

Oui, créez simplement une nouvelle classe fixe pour votre barre latérale et ajoutez une classe de décalage à votre div de contenu pour compenser la marge gauche, comme ceci:

CSS

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

Démo: http://jsfiddle.net/U8HGz/1/show/ Modifiez ici: http://jsfiddle.net/U8HGz/1/

Mettre à jour

Correction de ma démo pour prendre en charge la feuille d'amorçage réactive, maintenant elle coule avec la fonction réactive du bootstrap.

Remarque: Cette démo suit la barre de navigation fixe supérieure, de sorte que les deux éléments deviennent position:staticlors du 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 tombe pour la vue mobile.

CSS

.sidebar-nav-fixed {
     position:fixed;
     top:60px;
     width:21.97%;
 }

 @media (max-width: 767px) {
     .sidebar-nav-fixed {
         width:auto;
     }
 }

 @media (max-width: 979px) {
     .sidebar-nav-fixed {
         position:static;
        width: auto;
     }
 }

HTML

<div class="container-fluid">
<div class="row-fluid">
 <div class="span3">
   <div class="well sidebar-nav sidebar-nav-fixed">
    ...
   </div><!--/.well -->
 </div><!--/span-->
 <div class="span9">
    ...
 </div><!--/span-->
</div><!--/row-->

</div><!--/.fluid-container-->

Démo , modifiez ici .

^{note mineure: il y a une différence d'environ 10px / 1% sur la largeur de la barre latérale fixe, cela est dû au fait que comme il n'hérite pas de la largeur du div conteneur span3 car il est fixe, j'ai dû trouver un largeur. C'est assez proche.}

Et voici une autre méthode si vous souhaitez garder la barre latérale fixe jusqu'à ce que la grille tombe pour un petit écran / vue mobile.

CSS

.sidebar-nav-fixed {
    position:fixed;
    top:60px;
    width:21.97%;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        position:static;
        width:auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top:70px;
    }
}

Démo , modifiez ici .

Le dernier Boostrap (2.1.0) a une nouvelle fonction "affixe" JS spécifiquement pour ce type d'application, FYI.

cela va bousiller le Webdesign réactif. Mieux vaut envelopper la barre latérale fixe dans une requête multimédia.

CSS

@media (min-width: 768px) { 
  .sb-fixed{
    position: fixed;
  } 
}

HTML

<div class="span3 sb-fixed">
   <div class="well sidebar-nav">
      <!-- Sidebar Contents -->
   </div>
</div>

Désormais, la barre latérale n'est fixe que si le champ de vision est plus grand que 768px.

Ce n'est pas possible sans javascript. Je trouve affix.js trop complexe, donc j'utilise plutôt:

collant

J'ai commencé avec les réponses d'Andres et j'ai fini par obtenir une barre latérale collante comme celle-ci:

HTML:

<div class="span3 sidebar-width">
  <div class="well sidebar-nav-fixed">
    Sidebar
  </div>
</div>

<div class="span9 span-fixed-sidebar">
  Content
</div> <!-- /span -->

CSS:

.sidebar-nav-fixed {
  position:fixed;
}

JS / jQuery:

sidebarwidth = $(".sidebar-width").css('width');
$('.sidebar-nav-fixed').css('width', sidebarwidth);
contentmargin = parseInt(sidebarwidth) + 60;
$('.span-fixed-sidebar').css('marginLeft', contentmargin);

Je suppose que j'ai également besoin de JS pour mettre à jour la variable 'sidebarwidth' lorsque la fenêtre est redimensionnée.

Très facile d'obtenir la navigation fixe ou tout ce que vous voulez. Tout ce dont vous avez besoin est d'écrire votre balise de correction comme celle-ci et de la mettre dans votre section corps

   <div style="position: fixed">
       test - try  scroll again. 
   </div>

Avec la version actuelle de Bootstrap (3.3.2), il existe un bon moyen d'obtenir une barre latérale fixe pour la navigation.

Cette solution fonctionne également bien avec la classe de fluide conteneur réintroduite, ce qui signifie qu'il est facilement possible d'avoir une mise en page plein écran réactive.

Normalement, vous devrez utiliser des largeurs et des marges fixes ou la navigation chevaucherait le contenu, mais avec l'aide de la colonne d'espace réservé vide, le contenu est toujours positionné au bon endroit.

La configuration ci-dessous enveloppe le contenu lorsque vous redimensionnez la fenêtre à moins de 768 pixels et libère la navigation fixe.

Voir http://www.bootply.com/ePvnTy1VII pour un exemple fonctionnel.

CSS

@media (min-width: 767px) { 
    #navigation{
        position: fixed;
    }
}

HTML

<div class="container-fluid">
 <div class="row">
  <div id="navigation" class="col-lg-2 col-md-3 col-sm-3">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
    </ul>
  </div>

  <div class="col-lg-2 col-md-3 col-sm-3 hidden-xs">
    <!-- Placeholder - keep empty -->
  </div> 

  <div id="main" class="col-lg-10 col-md-9 col-sm-9 fill">
     ...
     Huge Content
     ...
  </div> 
 </div>
</div>