How to make a block with position:fixed scroll?

Question

css

Good afternoon!
There is a page http://new_bnews.zed.kz/ru/faq
It has a list of questions. The answers appear in a popup window. The window is set to position:fixed with a padding of 60 pixels from the top of the screen.
The problem is that some answers are too long, so the popup doesn't fit on the screen. But the way it is set to position:fixed, the window will not scroll.
If you set position:absolute to it, then it will be positioned relative to the top of the site, and this is not suitable, because you can open the answer to some lower question, and it (the answer) will open outside of visibility somewhere at the top. And it is necessary that everything be 60 pixels exactly from the top of the screen.
How can this problem be solved?
Thanks in advance!

Answer 1

Change structure:

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

And styles:

.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%);
}

This is without vertical centering, if it is needed, then on js you need to set top depending on the height of the window

Answer 2

Make the popup absolute. But when opening a popup, call the following function:

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