Помогите разобраться, как правильно зафиксировать (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.
А хочется максимального достижения своей цели и адаптивности. Не подскажете как реализовать всё это?
Например:
<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) в этом случае, можно представить как отдельный прямоугольник, который можно расположить в любом месте этого листа. И чтобы как-то его расположить, ему необходимо установить какие-то привязки. К верху экрана (top), к левой стороне (left), к правой стороне (right), к нижней стороне (bottom), ширину (width) и высоту (height). При этом не стоит задавать все привязки или размеры этого прямоугольника, достаточно использовать те которые будут одназначно определять его место на странице.
Например, если Вы хотите его привязать к низу страницы на всю ширину (с учётом полей), то это можно сделать так:
Т.е. от левого края браузера 15px, от правого края 15px, от низа 20px, высота, определяется содержимым.
Если у Вас адаптивный дизайн, то в этом случае необходимо использовать медиа-запросы.
Если вариант более сложный и Вы не знаете точные значения блока fixed, то необходимо будет их задавать с помощью JavaScript.
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>Вот скриншот до прокрутки:
А вот скриншот после:
<div id="myAffix" data-spy="affix" data-offset-top="0"> <div class="panel panel-default"> <div class="panel-body"> Содержимое фиксированного блока... </div> </div> </div>Спасибо вам большое за помощь!