Плагин Bootstrap Affix с жидкостной компоновкой

Если я хотел бы использовать плагин аффикса для боковой панели в макете жидкости, но ширина боковой панели всегда меняется, когда она прикреплена, и отзывчивый дизайн тоже не работает.

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

Кто-нибудь знает, как заставить его работать?

Ответ 1

Для аффикса для работы с боковой панелью span3 вам нужно добавить javascript, чтобы закрепить ширину и управлять размерами.

Я просто написал небольшую функцию javascript, чтобы сделать эту работу.

Просмотрите эту ошибку из начальной загрузки.

/*
* Clamped-width. 
* Usage:
*  <div data-clampedwidth=".myParent">This long content will force clamped width</div>
*
* Author: LV
*/
$('[data-clampedwidth]').each(function () {
    var elem = $(this);
    var parentPanel = elem.data('clampedwidth');
    var resizeFn = function () {
        var sideBarNavWidth = $(parentPanel).width() - parseInt(elem.css('paddingLeft')) - parseInt(elem.css('paddingRight')) - parseInt(elem.css('marginLeft')) - parseInt(elem.css('marginRight')) - parseInt(elem.css('borderLeftWidth')) - parseInt(elem.css('borderRightWidth'));
        elem.css('width', sideBarNavWidth);
    };

    resizeFn();
    $(window).resize(resizeFn);
});

Ответ 2

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

Ответ 3

Вы должны явно задать свойство width (или min-width) для боковой панели. Если вы посмотрите на страницу, на которую указал Андрес, класс "bs-docs-sidenav" имеет явную ширину 228px.

Это переопределяет класс .span3 и предотвращает изменение размера боковой панели при прокрутке.

Если вы удалите это явное объявление ширины и прокрутите страницу, боковая панель изменится так же, как проблема, которую вы видите на своей собственной странице.

Ответ 4

$(document).ready(function () {
  setTimeout(function () {
    $('.sidebar > *').affix({
      offset: {
        top: function () { return $window.width() <= 980 ? 290 : 210 }
        , bottom: 270
      }
    })
  }, 100)
});

где ваша страница похожа:

<div class="span2 navper">
  <ul class="nav nav-tabs nav-stacked" data-spy="affix">
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Homepage</a></li>
  </ul>
</div>