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

Question

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

Answer 1

Примечание: Существует загрузочный плагин 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-->

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

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

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

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

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

Answer 2

Последний Boostrap (2.1.0) имеет новую функцию «аффикса» JS специально для этого типа приложений.

Answer 3

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

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 пикселей.

Answer 4

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

stickyfloat

Answer 5

В текущей версии 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>

Answer 6

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

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

Answer 7

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

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