tengo unposition: fixed div en un diseño, como una barra lateral. Me han pedido que parte de su contenido permanezca fijo en la parte superior (internamente), y el resto para desplazarsesi desborda el fondo del div.

He echado un vistazo aesta respuestaSin embargo, la solución presentada no funciona conposition: fixed oposition: absolute contenedores, que es un dolor.

He hecho una demostración JSFiddle de mi problemaaquí. Lo ideal es que la gran cantidad de texto se desplace, en lugar de desbordarse hacia la parte inferior de la página. La altura del encabezado puede variar con el contenido y puede estar animada.

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

Sin un encabezado fijo, simplemente puedo agregaroverflow-y: scroll adiv.sidebar y felizmente puedo desplazar todo su contenido si se desborda la parte inferior del contenedor. Sin embargo, tengo problemas al tener un encabezado de altura variable fijo en la parte superior de la barra lateral y tener contenido debajo de ese rollo si es demasiado largo para que quepa en el contenedor.

div.sidebar debe permanecerposition: fixed, y me gustaría mucho hacer esto sin hacks, así como hacerlo lo más cruzado posible con el navegador. He intentado varias cosas, pero ninguna de ellas funciona, y no estoy seguro de qué intentar desde aquí.

¿Cómo puedo hacer un div dentro de unposition: fixed el contenedor se desplaza solo en la dirección Y cuando el contenido desborda el div que lo contiene, con un encabezado fijo de altura variable e indeterminada? Me gustaría mucho alejarme de JS, pero si tengo que usarlo lo haré.