Risposte:
Nota: esiste un plug-in jQuery bootstrap che fa questo e molto altro che è stato introdotto in alcune versioni dopo che questa risposta è stata scritta (quasi due anni fa) chiamato Affix . Questa risposta si applica solo se stai usando Bootstrap 2.0.4 o inferiore.
Sì, crea semplicemente una nuova classe fissa per la barra laterale e aggiungi una classe offset al div del contenuto per compensare il margine sinistro, in questo modo:
CSS
.sidebar-nav-fixed {
padding: 9px 0;
position:fixed;
left:20px;
top:60px;
width:250px;
}
.row-fluid > .span-fixed-sidebar {
margin-left: 290px;
}
Demo: http://jsfiddle.net/U8HGz/1/show/ Modifica qui: http://jsfiddle.net/U8HGz/1/
Aggiornare
Risolto il problema con la mia demo per supportare il foglio di bootstrap reattivo, ora scorre con la funzione reattiva del bootstrap.
Nota: questa demo scorre con la barra di navigazione fissa superiore, quindi entrambi gli elementi diventano position:static
dopo il ridimensionamento dello schermo, ho posizionato un'altra demo sotto che mantiene la barra laterale fissa fino a quando lo schermo non scende per la visualizzazione 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-->
nota minore: c'è una differenza di circa 10px / 1% sulla larghezza della barra laterale fissa, è dovuto al fatto che poiché non eredita la larghezza dal div del contenitore span3 perché è fissa, ho dovuto inventare un larghezza. È abbastanza vicino.
Ed ecco un altro metodo se vuoi mantenere la barra laterale fissa fino a quando la griglia non si abbassa per la visualizzazione su schermo piccolo / 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;
}
}
margin-left:290px
dichiarazione sulla .span-fixed-sidebar
classe fatta per far posto alla sidebar, se non ci fosse, il contenuto si sovrapporrebbe alla sidebar su schermi più piccoli. È possibile eliminare la barra di scorrimento orizzontale pur nascondendosi esplicitamente sul body
tag, in questo modo: body { overflow-x: hidden; }
.
questo rovinerà il responsive Webdesign. È meglio racchiudere la barra laterale fissa in una media query.
CSS
@media (min-width: 768px) {
.sb-fixed{
position: fixed;
}
}
HTML
<div class="span3 sb-fixed">
<div class="well sidebar-nav">
<!-- Sidebar Contents -->
</div>
</div>
Ora la barra laterale è solo fissa, se il viewpot è più grande di 768px.
Questo non è possibile senza javascript. Trovo affix.js troppo complesso, quindi preferisco usare:
Ho iniziato con le risposte di Andres e ho finito per ottenere una barra laterale appiccicosa come questa:
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);
Suppongo di aver bisogno anche di JS per aggiornare la variabile "sidebarwidth" quando il viewport viene ridimensionato.
Molto facile da ottenere correzione nav o tutto il tag che desideri. Tutto ciò di cui hai bisogno è scrivere il tuo fix tag in questo modo e metterlo nella sezione del tuo corpo
<div style="position: fixed">
test - try scroll again.
</div>
Con l'attuale versione Bootstrap (3.3.2) c'è un bel modo per ottenere una barra laterale fissa per la navigazione.
Questa soluzione funziona bene anche con la classe container-fluid reintrodotta, il che significa che è facilmente possibile avere un layout a schermo intero reattivo.
Normalmente dovresti usare larghezze e margini fissi o la navigazione si sovrapporrebbe al contenuto, ma con l'aiuto della colonna segnaposto vuota il contenuto è sempre posizionato nel posto giusto.
La configurazione seguente avvolge il contenuto quando ridimensionate la finestra a meno di 768px e rilascia la navigazione fissa.
Vedi http://www.bootply.com/ePvnTy1VII per un esempio funzionante.
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>