Navigazione laterale fissa in fluido Twitter Bootstrap 2.0

Question

È possibile rendere la navigazione della barra laterale rimanere sempre fissata sullo scorrimento nel layout fluido?

Answer 1

Nota: C'è un plug -in Bootstrap jQuery che lo fa e molto di più che è stato introdotto alcune versioni dopo che questa risposta è stata scritta (quasi due anni fa) chiamata Apporre. Questa risposta si applica solo se si utilizza Bootstrap 2.0.4 o inferiore.

---

Sì, crea semplicemente una nuova classe fissa per la tua barra laterale e aggiungi una classe offset al tuo Div di contenuti per compensare il margine sinistro, come: così:

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 la mia demo per supportare il foglio bootstrap reattivo, ora scorre con la caratteristica reattiva del bootstrap.

NOTA: questa demo scorre con la barra navigare fissa superiore, quindi entrambi gli elementi diventano position:static Al momento del ridimensionamento dello schermo, ho posizionato un'altra demo sotto che mantiene la barra laterale fissa fino a quando lo schermo non scende per la vista 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-->

Demo, modificare qui.

^{Nota minore: esiste una differenza di circa 10px/1% sulla larghezza della barra laterale fissa, è a causa del fatto che poiché non eredita la larghezza dal div del contenitore Span3 perché è stato fisso, ho dovuto trovare un larghezza. È abbastanza vicino.}

Ed ecco un altro metodo se si desidera mantenere la barra laterale fissa fino a quando la griglia non scende per una vista piccola schermata/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;
    }
}

Demo, modificare qui.

Answer 2

L'ultimo Boostrap (2.1.0) ha una nuova funzione JS "Affis" appositamente per questo tipo di applicazione, FYI.

Answer 3

Ciò rovinerà la WebDesign reattiva. Meglio avvolgere la barra laterale fissa in una query multimediale.

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 è fissata solo se il mirino è più grande di 768px.

Answer 4

Questo non è possibile senza JavaScript. Trovo affisso.js troppo complesso, quindi preferisco usare:

stickyfloat

Answer 5

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 che ho anche bisogno di JS per aggiornare la variabile "sidebarwidth" quando viene ridimensionato la vista.

Answer 6

Molto facile da ottenere Nav Fix o tutto il tag che desideri. Tutto ciò di cui hai bisogno è scrivere il tuo tag di correzione in questo modo e metterlo nella sezione del tuo corpo

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

Answer 7

Con l'attuale versione bootstrap (3.3.2) c'è un bel modo per ottenere una barra laterale fissa per la navigazione.

Questa soluzione funziona anche bene con la classe contenitore-fluide reintrodotta, il che significa che è facilmente possibile avere un layout a schermo intero reattivo.

Normalmente dovresti utilizzare larghezze e margini fissi o la navigazione si sovrappone al contenuto, ma con l'aiuto della colonna di segnaposto vuota il contenuto è sempre posizionato nel posto giusto.

La configurazione seguente avvolge il contenuto quando si ridimensiona la finestra a meno di 768px e rilascia la navigazione fissa.

Vedere 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>