Прокрутка части содержимого в контейнере с фиксированной позицией
У меня есть position: fixeddiv в макете в качестве боковой панели. Меня попросили, чтобы часть его содержимого оставалась зафиксированной в верхней части (внутренне), а остальная часть прокручивалась , если она переполняет нижнюю часть div .
Я просмотрел этот ответ , однако представленное там решение не работает с контейнерами position: fixedили position: absolute, что доставляет неудобство.
Я сделал JSFiddle демонстрацию моей проблемы здесь . Большой объем текста в идеале должен прокручиваться, а не перетекать в нижнюю часть страницы. Высота заголовка может варьироваться в зависимости от содержимого и может быть анимированной.
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;
}Без фиксированного заголовка я могу просто добавить overflow-y: scrollк div.sidebarи с радостью прокрутить все его содержимое, если оно выходит за пределы нижней части контейнера. Однако у меня возникают проблемы с фиксированным заголовком переменной высоты в верхней части боковой панели и наличием любого содержимого под этой прокруткой, если оно слишком длинное, чтобы поместиться в контейнер.
div.sidebarдолжен остаться position: fixed, и очень хотелось бы сделать это без всяких хаков, а так же сделать максимально кроссбраузерным. Я пробовал разные вещи, но ни один из них не работает, и я не уверен, что попробовать отсюда.
Как сделать так, чтобы элемент div внутри контейнера position: fixedпрокручивался только в направлении Y, когда его содержимое выходит за пределы содержащего его элемента с фиксированным заголовком переменной неопределенной высоты? Я бы очень хотел держаться подальше от JS, но если мне придется его использовать, я буду.