Przewiń część zawartości w kontenerze o stałej pozycji

mamposition: fixed div w układzie, jako pasek boczny. Zostałem poproszony o to, aby część jego zawartości pozostała przymocowana do góry (wewnętrznie), a reszta do przewinięciajeśli przepełni dno div.

Spojrzałem na tota odpowiedź, jednak rozwiązanie przedstawione tam nie działaposition: fixed lubposition: absolute pojemniki, co jest bólem.

Zrobiłem demonstrację mojego problemu w JSFiddletutaj. Duża ilość tekstu powinna przewijać się, zamiast przelewać się na dole strony. Wysokość nagłówka może się różnić w zależności od treści i może być animowana.

<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>

Bez stałego nagłówka mogę po prostu dodaćoverflow-y: scroll dodiv.sidebar i mogę z radością przewinąć całą zawartość, jeśli przepełni dno pojemnika. Mam jednak problemy z posiadaniem stałego nagłówka o zmiennej wysokości na górze paska bocznego i posiadaniem dowolnej zawartości pod tym przewijaniem, jeśli jest zbyt długi, aby zmieścić się w kontenerze.

div.sidebar musi zostaćposition: fixedi bardzo chciałbym to zrobić bez żadnych hacków, a także sprawić, aby była to przeglądarka krzyżowa. Próbowałem różnych rzeczy, ale żadna z nich nie działa i nie jestem pewien, co tu wypróbować.

Jak mogę stworzyć div wewnątrz aposition: fixed kontener przewija tylko w kierunku Y, gdy zawartość przepełnia zawartość div, ze stałym nagłówkiem o różnej, nieokreślonej wysokości? Bardzo chciałbym trzymać się z daleka od JS, ale jeśli będę musiał z niego skorzystać, zrobię to.

questionAnswers(5)

yourAnswerToTheQuestion