Как правильно зафиксировать колонку на 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. А хочется максимального достижения своей цели и адаптивности. Не подскажете как реализовать всё это?

Комментарии: 12

ctac
ctac
Как это сделать для 4 бутстрапа? sticky-top не работает.
Александр Мальцев
Александр Мальцев
Ссылка на пример. С помощью этого Bootstrap класса к элементу добавляется CSS-свойство position со значением sticky и некоторые другие. sticky не работает только в браузерах, которые не поддерживают его. Сейчас – это только Internet Explorer 10 и 11. В них данный блок будет отображаться как обычно (без прилипания).
Юрий
Юрий
Александр, добрый день. Попробовал ваш код на пустом шаблоне bootstrap с фиксированной sticky-top шапкой сайта. Возникает проблема с колонкой, она прилипает не к низу шапки, а заходит под шапку и крепится к верху экрана. Если возможно, покажите решение задачи, чтобы боковая колонка не поднималась выше нижней границы фиксированной шапки (горизонтальной навигационной панели). Видел решения с помощью JavaScript, очень хотелось бы увидеть вариант без применения JavaScript. Заранее спасибо!
Александр Мальцев
Александр Мальцев
Привет! Для этого sticky-блоку нужно просто установить CSS-свойство top с нужным значением.
Например:
<section class="sticky-top" style="top: 70px;">
Юрий
Юрий
Все получилось, большое спасибо!
Аноним
Аноним
А если необходимо зафиксировать панель, на которой находятся две кнопки (рис.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), и по факту-то они фиксируется при прокрутке, но вот необходимый размер не приобретают.


Александр Мальцев
Александр Мальцев
Правильно. Элемент, которому Вы установили 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.
Аноним
Аноним
Спасибо большое, действительно помогло
Александр Мальцев
Александр Мальцев
В 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>
Дмитрий
Дмитрий
Отличный рецепт. Вот только ещё одна маленькая досада. Левый блок почему-то при прокрутке изменяется в размере, в меньшую сторону. Так же при событии onClick (когда кликаю мышью по странице) замечается аналогичный эффект.

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


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

Спасибо вам большое за помощь!