Respostas:
Nota: Existe um plugin jQuery de bootstrap que faz isso e muito mais que foi introduzido algumas versões depois que esta resposta foi escrita (quase dois anos atrás) chamado Affix . Essa resposta se aplica apenas se você estiver usando o Bootstrap 2.0.4 ou inferior.
Sim, basta criar uma nova classe fixa para sua barra lateral e adicionar uma classe de deslocamento ao seu div de conteúdo para compensar a margem esquerda, assim:
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/ Edite aqui: http://jsfiddle.net/U8HGz/1/
Atualizar
Corrigido meu demo para suportar a folha de bootstrap responsivo, agora ele flui com o recurso responsivo do bootstrap.
Nota: Esta demonstração flui com a barra de navegação fixa superior, de modo que ambos os elementos se tornam position:static
no redimensionamento da tela, coloquei outra demonstração abaixo que mantém a barra lateral fixa até que a tela caia para visualização móvel.
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-->
observação secundária: há cerca de 10px / 1% de diferença na largura da barra lateral fixa, é devido ao fato de que, uma vez que ela não herda a largura do div do contêiner span3 porque é fixo, eu tive que chegar a um largura. Está perto o suficiente.
E aqui está outro método se você quiser manter a barra lateral fixa até que a grade caia para exibição em tela pequena / móvel.
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
declaração sobre a .span-fixed-sidebar
classe feita para dar lugar à barra lateral, caso ela não existisse, o conteúdo se sobreporia à barra lateral em telas menores. Você pode eliminar a barra de rolagem horizontal no entanto, escondendo-lo explicitamente no body
tag, assim: body { overflow-x: hidden; }
.
isso vai bagunçar o Webdesign responsivo. Melhor envolver a barra lateral fixa em uma consulta de 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>
Agora, a barra lateral só é corrigida se o viewpot for maior que 768px.
Isso não é possível sem javascript. Acho affix.js muito complexo, então prefiro usar:
Comecei com as respostas de Andrés e acabei obtendo uma barra lateral pegajosa como esta:
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);
Estou assumindo que também preciso do JS para atualizar a variável 'sidebarwidth' quando a janela de visualização é redimensionada.
Com a versão atual do Bootstrap (3.3.2), há uma boa maneira de obter uma barra lateral fixa para navegação.
Essa solução também funciona bem com a classe container-fluid reintroduzida, o que significa que é facilmente possível ter um layout de tela inteira responsivo.
Normalmente você precisaria usar larguras e margens fixas ou a navegação se sobreporia ao conteúdo, mas com a ajuda da coluna de espaço reservado vazio o conteúdo é sempre posicionado no lugar certo.
A configuração abaixo envolve o conteúdo quando você redimensiona a janela para menos de 768 px e libera a navegação fixa.
Consulte http://www.bootply.com/ePvnTy1VII para obter um exemplo prático.
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>