Исправлена ​​навигация по боковой панели в Fluid twitter bootstrap 2.0

Можно ли сделать так, чтобы навигация на боковой панели всегда оставалась фиксированной при прокрутке в гибком макете?

Примечание. Существует плагин начальной загрузки jQuery, который делает это и многое другое, который был представлен через несколько версий после написания этого ответа (почти два года назад) под названием Affix . Этот ответ применим только в том случае, если вы используете Bootstrap 2.0.4 или ниже.

Да, просто создайте новый фиксированный класс для боковой панели и добавьте класс смещения в свой div содержимого, чтобы компенсировать левое поле, например:

CSS

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

Демо: http://jsfiddle.net/U8HGz/1/show/ Редактировать здесь: http://jsfiddle.net/U8HGz/1/

Обновить

Исправлена ​​моя демонстрация для поддержки адаптивного листа начальной загрузки, теперь она работает с отзывчивой функцией начальной загрузки.

Примечание: эта демонстрация проходит с верхней фиксированной навигационной панелью, поэтому оба элемента становятся position:staticпри изменении размера экрана, я разместил еще одну демонстрацию ниже, которая поддерживает фиксированную боковую панель, пока экран не упадет для мобильного просмотра.

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

Демо , редактировать здесь .

^{небольшое примечание: разница в ширине фиксированной боковой панели составляет около 10 пикселей / 1%, это связано с тем, что, поскольку она не наследует ширину от div контейнера span3, потому что она фиксированная, мне пришлось придумать ширина. Достаточно близко.}

А вот еще один метод, если вы хотите, чтобы боковая панель оставалась фиксированной, пока сетка не упадет для небольшого экрана / мобильного просмотра.

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

Демо , редактировать здесь .

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

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

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 слишком сложным, поэтому я предпочитаю использовать:

липкий поплавок

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

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' при изменении размера области просмотра.

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

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

Текущая версия Bootstrap (3.3.2) позволяет получить фиксированную боковую панель для навигации.

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

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

Приведенная ниже настройка обертывает содержимое, когда вы изменяете размер окна до менее 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>