Прокрутить часть содержимого в контейнере с фиксированной позицией

у меня естьposition: fixed div в макете, в качестве боковой панели. Меня попросили, чтобы часть его содержимого была зафиксирована в верхней части (внутри), а остальная часть прокручиваласьif it overflows the bottom of the div.

Я посмотрел наэтот ответоднако решение, представленное там, не работает сposition: fixed или жеposition: absolute контейнеры, что является болью.

Я сделал JSFiddle-демонстрацию своей проблемыВот, Большой объем текста в идеале должен прокручиваться, а не перетекать вниз страницы. Высота заголовка может варьироваться в зависимости от содержимого и может быть анимированной.

<code>body {
    background: #eee;
    font-family: sans-serif;
}

div.sidebar {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 280px;
}
div#fixed {
    background: #76a7dc;
    padding-bottom: 10px;
    color: #fff;
}

div#scrollable {
    overlow-y: scroll;
}</code>
<code><div class="sidebar">
    <div id="fixed">
        Fixed content here, can be of varying height using jQuery $.animate()        
    </div>

    <div id="scrollable">
        Scrolling content<br><br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div></code>

Без фиксированного заголовка я могу просто добавитьoverflow-y: scroll вdiv.sidebar и я могу с радостью прокрутить все его содержимое, если оно переполняет нижнюю часть контейнера. Однако у меня возникают проблемы с наличием фиксированного заголовка с переменной высотой в верхней части боковой панели и с любым содержимым под этой прокруткой, если он слишком длинный, чтобы помещаться в контейнер.

div.sidebar must остатьсяposition: fixedи я очень хотел бы сделать это без каких-либо взломов, а также сделать его как можно более кроссбраузерным. Я пробовал разные вещи, но ни одна из них не сработала, и я не уверен, что можно попробовать отсюда.

Как я могу сделать div внутриposition: fixed прокрутка контейнера только в направлении Y, когда его содержимое переполняет содержащий div с фиксированным заголовком переменной неопределенной высоты? Я очень хотел бы держаться подальше от JS, но если мне придется использовать это, я буду.

Ответы на вопрос(5)

Ваш ответ на вопрос