Corrigida a navegação da barra lateral no fluido twitter bootstrap 2.0

É possível tornar a navegação da barra lateral sempre fixa em rolagem no layout fluido?

    Nota: Existe um plugin bootstrap jQuery que faz isso e muito mais que foi introduzido algumas versões depois que esta resposta foi escrita (quase dois anos atrás) chamada Affix . Esta resposta só se aplica se você estiver usando o Bootstrap 2.0.4 ou inferior.


    Sim, basta criar uma nova class fixa para sua barra lateral e adicionar uma class 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; } 

    Demonstração: http://jsfiddle.net/U8HGz/1/show/ Editar aqui: http://jsfiddle.net/U8HGz/1/

    Atualizar

    Corrigido meu demo para suportar a folha de boot responsiva, agora ela flui com o recurso responsivo do bootstrap.

    Nota: Esta demo flui com a barra de navegação fixa superior, de modo que ambos os elementos se tornam position:static no redimensionamento da canvas, eu coloquei outra demonstração abaixo que mantém a barra lateral fixa até que a canvas caia para a 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

     
    ...

    Demonstração , edite aqui .

    nota menor: há cerca de 10px / 1% de diferença na largura da barra lateral fixa, é devido ao fato de que, uma vez que não herda a largura do div do recipiente span3 porque ele é fixo, eu tive que criar 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 canvas pequena / visualização 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; } } 

    Demonstração , edite aqui .

    O último Boostrap (2.1.0) tem um novo recurso “afixo” JS especificamente para este tipo de aplicativo, FYI.

    isso estragará 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

     

    Agora a barra lateral só é corrigida se o viewpot for maior que 768px.

    Isso não é possível sem o javascript. Eu acho o affix.js muito complexo, então eu prefiro usar:

    stickyfloat

    Comecei com as respostas de Andres e acabei recebendo uma barra lateral assim:

    HTML:

      
    Content

    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); 

    Eu estou supondo que eu também preciso de JS para atualizar a variável ‘sidebarwidth’ quando o viewport é redimensionado.

    Muito fácil de obter correção de navegação ou tudo o que você deseja. Tudo que você precisa é escrever sua etiqueta de correção como esta e colocá-la na seção do seu corpo

      
    test - try scroll again.

    Com a versão atual do Bootstrap (3.3.2), existe uma boa maneira de obter uma barra lateral fixa para navegação.

    Essa solução também funciona bem com a class de fluido contêiner reintroduzida, o que significa que é possível ter um layout de canvas 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 vazia, o conteúdo é sempre posicionado no lugar certo.

    A configuração abaixo envolve o conteúdo quando você redimensiona a janela para menos de 768px e libera a navegação fixa.

    Veja http://www.bootply.com/ePvnTy1VII para um exemplo de trabalho.

    CSS

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

    HTML

     
    ... Huge Content ...