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

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

Источник

7 ответов

Решение

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

stickyfloat

Источник

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

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

Источник

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

   <div style="position: fixed">
       test - try  scroll again. 
   </div>
Источник

В текущей версии 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>
Источник
Другие вопросы по тегам