Создайте липкую навигационную панель в Bootstrap 3.0

Ответ 1

Вам нужно определить CSS, когда боковая панель станет фиксированной...

Например,

#sidebar.affix {
    position: fixed;
    top:25px;
    width:228px;
  }

Ниже приведен рабочий пример : http://bootply.com/73864

Ответ 2

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

Этот Jsfiddle содержит рабочую липкую боковую панель (сделать окно результатов больше, чтобы увидеть, как он работает правильно). Продолжайте читать, чтобы создать ту же самую боковую панель.

1. Создайте html для вашей боковой панели. В этом примере мы будем использовать бутстрапы nav-pills внутри колодца.

<div class="row">
  <div class="col-sm-3">
    <div class="well bs-sidebar affix" id="sidebar">
      <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </div> <!--well bs-sidebar affix-->
  </div> <!--col-sm-3-->
  <div class="col-sm-9">
    <p>Main body content goes here</p>
  </div> <!--col-sm-9-->
</div> <!--row-->

2. Вызовите плагин аффикса в файле js

$('#sidebar').affix({
  offset: {
    top: $('header').height()
  }
}); 

Вам нужно заменить "header" тем, что будет над боковой панелью. Если вы используете навигационную панель bootstrap и она находится над боковой панелью, замените "header" классом, который вы используете для навигационной панели, например:

top: $('.navbar navbar-default').height()

3. Добавить css для класса аффикса

CSS для невосприимчивого макета

.bs-sidebar.affix {
  width: 263px;
  top: 25px;
}

CSS для гибкого макета

@media (min-width: 768px) {
  .bs-sidebar.affix {
    width: 158px;
    top: 25px;
  }
}

@media (min-width: 992px) {
  .bs-sidebar.affix {
    width: 213px;
    position: fixed;
    top: 25px;
  }
}

@media (min-width: 1200px) {
  .bs-sidebar.affix {
    width: 263px;
  }
}

Ответ 3

По умолчанию Navbar Twitter Bootstrap 3 является горизонтальным. Существует четыре типа: по умолчанию, статический верх и фиксированный верхний и нижний, см. Примерный раздел этой страницы: http://getbootstrap.com/getting-started

Но, конечно, вы можете использовать Twitter Bootstrap 3 для создания (левой) боковой навигации. Пожалуйста, сначала прочитайте Документы, он содержит много примеров. Сделайте эскиз своей идеи, попробуйте привести ее в соответствие с примерами. Задайте здесь вопросы по устранению неполадок вашего кода. Начните с аффикса (http://getbootstrap.com/javascript/#affix) и раздела навигации (http://getbootstrap.com/components/#nav), возможно, сначала.

Может быть, также проверьте: как сделать загрузочный файл с наложенным контентом на холсте, а не перемещать его