Correction de la navigation dans la barre latérale dans fluid twitter bootstrap 2.0

Question

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

Answer 1

Note : Il existe un plugin bootstrap jQuery qui fait cela et bien plus encore. Il a été introduit quelques versions après la rédaction de cette réponse (il y a presque deux ans) et s'appelle Apposez . Cette réponse ne s'applique que si vous utilisez Bootstrap 2.0.4 ou une version inférieure.

---

Oui, il suffit de créer une nouvelle classe fixe pour votre barre latérale et d'ajouter une classe décalée à votre div de contenu pour compenser la marge gauche, comme suit :

CSS

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

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

Démonstration : http://jsfiddle.net/U8HGz/1/show/ Editer ici : http://jsfiddle.net/U8HGz/1/

Mise à jour

J'ai corrigé ma démo pour qu'elle prenne en charge la feuille de bootstrap réactive, elle est maintenant compatible avec la fonctionnalité réactive du bootstrap.

Remarque : Cette démo s'écoule avec la barre de navigation fixe supérieure, de sorte que les deux éléments deviennent position:static Lors du redimensionnement de l'écran, j'ai placé une autre démo en dessous qui maintient la barre latérale fixe jusqu'à ce que l'écran descende pour l'affichage 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 , modifier ici .

note mineure : il y a une différence d'environ 10px/1% sur la largeur de la barre latérale fixe, c'est dû au fait qu'elle n'hérite pas de la largeur de la div span3 container parce qu'elle est fixe, j'ai dû trouver une largeur. C'est assez proche.

Et voici une autre méthode si vous voulez garder la barre latérale fixe jusqu'à ce que la grille s'abaisse pour un affichage sur petit écran/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 , modifier ici .

Answer 2

La dernière version de Boostrap (2.1.0) dispose d'une nouvelle fonction JS "affixe" spécialement conçue pour ce type d'application, pour votre information.

Answer 3

Cela va foutre en l'air le responsive Webdesign. Il vaut mieux intégrer la barre latérale fixe dans une requête mé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>

Maintenant la barre latérale n'est fixe que si la zone d'affichage est supérieure à 768px.

Answer 4

Ce n'est pas possible sans javascript. Je trouve affix.js trop complexe, donc je préfère utiliser :

stickyfloat

Answer 5

J'ai commencé par les réponses d'Andres et j'ai fini par obtenir une barre latérale adhésive 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 d'affichage est redimensionnée.