По умолчаниюСветлая версия
↑ перейти к списку статей

Горизонтальный position:fixed

Как-то на Хабре был вопрос, каким образом можно сделать position:fixed, перемещающийся только по горизонтали.

Есть вопрос — есть ответ.
Делаем заготовку.

<div class="container"> <div class="block"></div> </div>

Контейнером будет служить абсолютно позиционированный див.
.container{
position:absolute;
top:0px;
left:0px;
width:200%;
height:300px;
clip:rect(0px, 10000px, 300px, 0px);/*здесь выставляйте свои параметры, сейчас блок двигается по горизонтальному контейнеру высотой в 300пк*/
}

Ключевым моментом здесь является свойство clip, которое позволяет ограничить область позиционированного элемента, отображаемую на странице.
Оперируя координатами, мы ограничили контейнеру область высотой в 300 пикселей и шириной в очень много пикселей.

Теперь осталось внутрь вложить блок, который и будет у нас «кататься» по горизонтали:
.block{
background:blue;
width:320px;
height:300px;
position:fixed;
}

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

Рабочий пример лежит здесь.
Поковырять код можно здесь.

Кнопки для сайта

2 комментария: Горизонтальный position:fixed

  1. Евгений говорит:

    Благодарю!

  2. omg говорит:

    выглядит как-будто работает только при position:absolute;
    top:0px;
    left:0px;
    от края браузера..