Исправлена навигация по боковой панели в жидком твиттере при загрузке 2.0

В последнем Boostrap (2.1.0) есть новая функция "аффикса" JS специально для этого типа приложений, FYI.

это испортит отзывчивый Webdesign. Лучше оберните фиксированную боковую панель в запросе на медиа.

CSS

@media (min-width: 768px) { 
  .sb-fixed{
    position: fixed;
  } 
}

HTML

<div class="span3 sb-fixed">
   <div class="well sidebar-nav">
      <!-- Sidebar Contents -->
   </div>
</div>

Теперь боковая панель фиксирована, если точка просмотра больше 768 пикселей.

Это невозможно без javascript. Я считаю affix.js слишком сложным, поэтому я предпочитаю использовать:

stickyfloat

В текущей версии Bootstrap (3.3.2) есть хороший способ добиться фиксированной боковой панели для навигации.

Это решение также хорошо работает с повторно введенным классом контейнера-жидкости, что означает, что легко получить гибкую полноэкранную компоновку.

Обычно вам нужно использовать фиксированные ширины и поля, или навигация будет перекрывать содержимое, но с помощью пустого столбца-заполнителя содержимое всегда будет располагаться в нужном месте.

Нижеприведенная настройка обертывает содержимое при изменении размера окна до 768 пикселей и освобождает фиксированную навигацию.

См. http://www.bootply.com/ePvnTy1VII для рабочего примера.

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>

Очень легко получить исправление nav или все теги, которые вы хотите. Все, что вам нужно, это написать свой тег fix, как этот, и поместить его в раздел вашего тела.

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

Я начал с ответов Андреса и в итоге получил липкую боковую панель:

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

Я предполагаю, что мне также нужна JS для обновления переменной "sidebarwidth" при изменении размера окна просмотра.