Как правильно зафиксировать колонку на Bootstrap?

Помогите разобраться, как правильно зафиксировать (position:fixed) колонку в макете.
Есть у меня в макете 2 колонки, левая и правая. В левой части панель, которую хочу «прикрутить» так, чтобы при прокрутке страницы вверх и вниз, она была строго фиксированной и никуда не съезжала. При этом чтобы правая колонка, которая содержит в себе ленту записей, свободно могла прокручиваться.
Так же, хочется достигнуть максимальной адаптивности, чтобы на маленьком экране все это в виде плиток выстраивались друг-за дружкой (т.е. в одну колонку).

HTML код двух колонок:
<content>
	<div class="container">
        	<div class="row">
            		<div class="col-xs-12 col-lg-4 left">
			...
			</div>
			<div class="col-xs-12 col-lg-8 right">
			...
			</div>
		</div>
	</div>
</content>


CSS код для этих колонок:
.left{
    position:fixed;
    width:20%;   
}
.right{
    width:68%;
    float:right;
}

На большом экране красота, всё как надо. Но вот если начать сужать размеры окна браузера, то начинается страшная картина, всё ужимается не так как надо. Выглядит страшно. Особенно на самом минимуме, до которого можно свернуть окно браузера по горизонтали. И элементы страницы не выстраиваются в одну колонку друг-за-дружку, как это было до описания тех двух классов (right и left) на CSS.
А хочется максимального достижения своей цели и адаптивности. Не подскажете как реализовать всё это?


   Вопросы 0    1180 0

Комментарии (7)

  1. Александр Мальцев 19 апреля 2016, 16:17 # 0
    В Bootstrap это можно сделать с помощью Affix.
    1. Надо немного изменить макет на следующий:
    <div class="container">
      <div class="row">
        <div id="left" class="col-xs-12 col-lg-4">
          <!-- Блок, который необходимо чтобы оставался на одном месте при прокручивании страницы -->
          <div id="myAffix" data-spy="affix" data-offset-top="0">
            Содержимое фиксированного блока...
          </div>
        </div>
        <div class="col-xs-12 col-lg-8">
          Основное содержимое...
        </div>
      </div>
    </div>
    
    2. Изменить все Ваши CSS стили на следующие:
    .affix {
      top: 0;
    }
    @media (max-width: 1200px) {
      .affix {
        position: static;
      }
    }
    
    3. Добавить JavaScript (+jQuery) скрипт, т.к. ширину фиксированного блока надо вычислять. Данный скрипт обусловлен тем, что макет адаптивный и ширина блоков не постоянна.
    <script>
    $(function(){
      $('#myAffix').width($('#left').width());
      $(window).resize(function(){
        $('#myAffix').width($('#left').width());
      });
    });
    </script>
    
    1. Дмитрий 19 апреля 2016, 17:55 # 0
      Отличный рецепт. Вот только ещё одна маленькая досада. Левый блок почему-то при прокрутке изменяется в размере, в меньшую сторону. Так же при событии onClick (когда кликаю мышью по странице) замечается аналогичный эффект.

      Вот скриншот до прокрутки:


      А вот скриншот после:
      1. Александр Мальцев 20 апреля 2016, 13:31 # 0
        Не знаю как Вы делаете, но если сделать так, то всё нормально должно отображаться:
        <div id="myAffix" data-spy="affix" data-offset-top="0">
          <div class="panel panel-default">
            <div class="panel-body">
              Содержимое фиксированного блока...
            </div>
          </div>
        </div>
        
        1. Дмитрий 20 апреля 2016, 17:37 # 0
          Да действительно, разобрался в чём была проблемка. Подключил JQuery в тегах header и всё пошло как надо, до этого библиотека подключалась перед закрывающимся тегом body.

          Спасибо вам большое за помощь!
    2. Антон 08 августа 2016, 00:53 # 0
      А если необходимо зафиксировать панель, на которой находятся две кнопки (рис.1)?
      <div class="row">
              <div class="panel panel-default">
                  <div class="panel-body" style="padding: 0px;">
                      <div class="row">
                          <div class="col-xs-6 col-sm-6" style="padding-left: 0px; padding-right: 0px;">
                              <button class="btn btn-warning btn-md" href="addtocart.html" style="width: 100%;">
                              add to cart
                              </button>
                          </div>
                          <div class="col-xs-6 col-sm-6" style="padding-left: 0px; padding-right: 0px;">
                              <button class="btn btn-success btn-md" href="viewcart.html" style="width: 100%;">
                              view cart
                              </button>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      
      Дело в том, что если им присвоить position:fixed, то они приобретают стандартную ширину и перемещаются в левом нижнем углу экрана (рис.2), и по факту-то они фиксируется при прокрутке, но вот необходимый размер не приобретают.


      1. Александр Мальцев 08 августа 2016, 12:58 # 0
        Правильно. Элемент, которому Вы установили position, равный fixed, отрывается от своего места. Данный элемент можно предствить себе как прямоугольную область, которая привязывается к краям браузера и при прокрутке остаётся на том же месте. При этом он не занимает пространство у элементов, которые распологаются в обычном потоке.
        Если страницу — представить как лист бумаги, в которой элементы распологаются один за другим в определённом порядке. То данный элемент (position: fixed) в этом случае, можно представить как отдельный прямоугольник, который можно расположить в любом месте этого листа. И чтобы как-то его расположить, ему необходимо установить какие-то привязки. К верху экрана (top), к левой стороне (left), к правой стороне (right), к нижней стороне (bottom), ширину (width) и высоту (height). При этом не стоит задавать все привязки или размеры этого прямоугольника, достаточно использовать те которые будут одназначно определять его место на странице.
        Например, если Вы хотите его привязать к низу страницы на всю ширину (с учётом полей), то это можно сделать так:
        <div class="panel panel-default" style="position: fixed; left: 15px; right: 15px; bottom: 20px;">
        ...
        
        Т.е. от левого края браузера 15px, от правого края 15px, от низа 20px, высота, определяется содержимым.
        Если у Вас адаптивный дизайн, то в этом случае необходимо использовать медиа-запросы.
        Если вариант более сложный и Вы не знаете точные значения блока fixed, то необходимо будет их задавать с помощью JavaScript.
        1. Антон 08 августа 2016, 16:05 # 0
          Спасибо большое, действительно помогло

      Вы должны авторизоваться, чтобы оставлять комментарии.