Фиксация нескольких блоков

[volshebnyi]

Здравствуйте!

 

Хотелось бы сделать макет примерно как на этом сайте.

 

Казалось бы, обычный двухколоночный макет с фиксированным сайдбаром. Но весь нюанс в том, что мне нельзя сделать цельный сайдбар и просто его зафиксировать. Нужно сделать так, что бы логотип, навигация и фильтры были размещены по порядку и не были заключены в один контейнер. Когда я это пытаюсь реализовать, все, естественно, сбивается в кучу из-за position: fixed для каждого контейнера.

 

Помогите, пожалуйста, дельным советом. Как это правильно реализовать?

 

http://jsfiddle.net/47avbbqj/

Edited July 12, 2015 by volshebnyi

[afdw]

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

 

Почему?

[volshebnyi]

 

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

 

Почему?

 

Особенности верстки для CMS. Название рубрики, фильтры и контент будут реализованы в одном XSL шаблоне. По-этому не хотелось бы разбивать...

[wwt]

http://jsfiddle.net/47avbbqj/1/

[volshebnyi]

wwt, спасибо. Но только в этом случае блоки приклеены к body, а мне необходимо, что бы они находились в контейнере main, который выравнен по центру и имеет ширину 1200px.

[wwt]

wwt, спасибо. Но только в этом случае блоки приклеены к body, а мне необходимо, что бы они находились в контейнере main, который выравнен по центру и имеет ширину 1200px.

с position:fixed так не получится. Он позиционируется относительно области просмотра в любом случае. Хотие позиционировать относительно родительского блока используйте absolute и relative, а на месте фиксируйте с помощью javascript

[afdw]

Он позиционируется относительно области просмотра в любом случае.

 

Странное поведение. Было бы логичней, если бы он позиционировался от элемента с относительным позиционированием, как absolute.

[amelice]

 

wwt, спасибо. Но только в этом случае блоки приклеены к body, а мне необходимо, что бы они находились в контейнере main, который выравнен по центру и имеет ширину 1200px.

с position:fixed так не получится. Он позиционируется относительно области просмотра в любом случае. Хотие позиционировать относительно родительского блока используйте absolute и relative, а на месте фиксируйте с помощью javascript

 

 

Можно, если спозиционировать фиксированных элементов в середине окна (left: 50%), дальше с помощью margin-left сдвинуть на 600 пикселей влево. 

UPD: на -600px

Edited July 12, 2015 by amelice

[wwt]

Кстати можно извратиться вот так http://jsfiddle.net/jsrmzvnx/, но ширина блока main должна быть известна и статична. В зависимости от нее задается отступ для фиксированного блока.

 

 

wwt, спасибо. Но только в этом случае блоки приклеены к body, а мне необходимо, что бы они находились в контейнере main, который выравнен по центру и имеет ширину 1200px.

с position:fixed так не получится. Он позиционируется относительно области просмотра в любом случае. Хотие позиционировать относительно родительского блока используйте absolute и relative, а на месте фиксируйте с помощью javascript

 

 

Можно, если спозиционировать фиксированных элементов в середине окна (left: 50%), дальше с помощью margin-left сдвинуть на 600 пикселей влево.

 

вы не поняли. сделать чтоб фиксированный блок был там где надо можно, а вот спозиционировать fixed относительно родителя (как absolute) нельзя!!!

[amelice]

если бы он позиционировался от элемента с относительным позиционированием, как absolute.

 

Не обязательно у блока absolute родитель должен быть с относительным позиционированием. absolute позиционируется от родителя с position != static.

То есть будет искать контейнера, пока не найдет родителя с position == absolute или  position == fixed или position == relative;  А если не найдет, то от html.

вы не поняли. сделать чтоб фиксированный блок был там где надо можно, а вот спозиционировать fixed относительно родителя (как absolute) нельзя!!!

я прекрасно поняла, фиксированные элементы позиционируются от окна просмотра.

Нам известно, что они имеют известную ширину, а так же блок main должен распологаться в центре и имеет фикс. ширину.

Поэтому можно оперировать так же со свойствами left, margin-left, только в этом случае нужно учитывать что контейнер это окно просмотра.

Edited July 12, 2015 by amelice

[volshebnyi]

А как же в примере реализовано я что-то не пойму? JS?

[wwt]

Нам известно, что они имеют известную ширину, а так же блок main должен распологаться в центре и имеет фикс. ширину. Поэтому можно оперировать так же со свойствами left, margin-left, только в этом случае нужно учитывать что контейнер это окно просмотра.

 

Все верно. Я то отвечал "нельзя" на вот эту фразу:

 

Но только в этом случае блоки приклеены к body, а мне необходимо, что бы они находились в контейнере main, который выравнен по центру и имеет ширину 1200px.

 

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

[amelice]

 

 

А как же в примере реализовано я что-то не пойму? JS?

Да, в примере через скрипт вешается на навигацию определенные свойства, в том чиcле fixed, как только начинается скроллирование контента. При определенной высоте окна они снова убираются.

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

http://codepen.io/amelice/full/aOGMYq/

Только нужно иметь в виду, так как жестко задан magin-left: -600px;, то в разрешениях меньше 1200px нужно позиционироваться от main или придумать другое поведение.

[volshebnyi]

wwt и amelice, спасибо Вам огромное! Буду пытаться сделать.

 

Только нужно иметь в виду, так как жестко задан magin-left: -600px;, то в разрешениях меньше 1200px нужно позиционироваться от main или придумать другое поведение.

Так от main я же никак не могу позиционироваться... 

[amelice]

Не обязательно от main, я ошиблась. Когда ширина окна меньше 1200пк, просто нужно скорректировать margin-left, и left

http://codepen.io/amelice/full/aOGMYq/