Виправлена ​​навігація на бічній панелі в рідинному твіттері bootstrap 2.0

Чи можна зробити так, щоб навігація на бічній панелі завжди залишалася фіксованою на прокрутці в макеті рідини?

Примітка: Існує плагін завантаження jQuery bootstrap, який робить це та набагато більше, що було представлено через кілька версій після написання цієї відповіді (майже два роки тому) під назвою 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%, що пов’язано з тим, що оскільки вона не успадковує ширину з div3 контейнера 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) є гарний спосіб досягти фіксованої бічної панелі для навігації.

Це рішення також добре працює з повторно представленим класом контейнерів-рідин, що означає, що легко отримати адаптивне повноекранне розташування.

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

Наведене нижче налаштування обертає вміст, коли ви змінюєте розмір вікна до менш ніж 768px, і звільняє фіксовану навігацію.

Див. 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>