Исправлена боковая панель по центру по вертикали

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

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

Как я могу добиться этого эффекта? Существует ли чистое решение css / html?

Я думал об обновлении положения боковых панелей при прокрутке, но, вероятно, оно будет мерцать при обновлении верхней позиции css. Есть ли какое-либо другое решение? Я бы действительно хотел сделать это только с помощью css, но я бы не возражал, если jquery предоставит функциональность, которую я ищу.

Ответ №1:

Вероятно, вам нужно добавить position: fixed; в css, чтобы сделать так, чтобы она не перемещалась.

1. Работает, если только не на мобильном устройстве. Большинство (все??) мобильные браузеры не поддерживают position:fixed

2. С исправленной позицией она не будет перемещаться, но как я могу центрировать ее по вертикали?

3. @Max, попробуй вот так: jsfiddle.net/maniator/chtZA/2 (часть css взята из примера @Andre)

Ответ №2:

Вот то, что вы ищете. Пожалуйста, обратите внимание, что мобильные браузеры будут игнорировать position:fixed поэтому вам нужно будет использовать некоторый js, чтобы заставить его работать и для них. Кроме того, убедитесь, что минимальная высота контейнера равна 200 пикселям;

 #sidebar
{
    height: 200px;
    position: fixed;    /* Keep in position on scroll */
    top: 50%;       /* push down 50% of container */
    margin-top: -100px; /* bring back up 50% height of this element */
}

#container
{
    min-height: 200px;
    _height: 200px; /* IE6 always acts as though height is min-height unless overflow: hidden */
}