Как заставить скроллиться блок с position:fixed?

Question

[pashabomber]

Добрый день!

Есть страница http://new_bnews.zed.kz/ru/faq
На ней список вопросов. Ответы появляются в попап-окне. Окну задано position:fixed с отступом 60 пикселей от верха экрана.
Проблема в том, что некоторые ответы слишком длинные, поэтому попап не помещается в экране. Но то как ему задано position:fixed, то окно не скроллится.
Если ему поставить position:absolute, то оно будет позиционироваться относительно верха сайта, а это не подходит, потому что можно открыть ответ на какой-нибудь нижний вопрос, и он (ответ) откроется за пределами видимости где-то наверху. А надо, чтобы все был на 60 пикселей именно от верха экрана.

Как можно решить эту проблему?

Заранее спасибо!

Answer 1

[Кирилл Туровников]

Измените структуру:

<div class="popupbg" id="popupbg">
    <div class="answer-popup"> </div>
</div>

И стили:

.popupbg{
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    overflow-y: scroll;
    padding: 100px 0;
}
.answer-popup{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Это без вертикальной центровки, если она нужна то на js надо задавать top в зависимости от высоты окна

Comments

[Капитан Какао]

Для меня было открытием, что блок с плавающей шириной и position:absolute, можно выровнять по центру благодаря left: 50%;transform: translateX(-50%);

Это мего круто, теперь всегда буду пользоваться!)

[Кирилл Туровников]

Rad Cor: и по высоте так же, это очень полезно когда не известны заранее размеры блока transform: translate(-50%, -50%);

[Капитан Какао]

Кирилл Туровников: да да, я как только это прочитал, сразу пошёл тестить, в том числе и по вертикали выравнивание)) Спасибо)

Answer 2

[Андрей Гончаров]

Делай попап absolute. Но при открытии попапа вызови такую фунцию:

var scrolled = $(window).scrollTop()+60;
$('твойпопап').css('top', scrolled);

Comments

[pashabomber]

спасибо!