eu tenho umposition: fixed div em um layout, como barra lateral. Fui solicitado que parte do conteúdo permanecesse fixa na parte superior (internamente) e o resto fossese transbordar a parte inferior do div.

Eu dei uma olhadaesta resposta, no entanto, a solução apresentada lá não funciona composition: fixed ouposition: absolute recipientes, o que é uma dor.

Eu fiz uma demonstração em JSFiddle do meu problemaAqui. A grande quantidade de texto deve ser rolada idealmente, em vez de transbordar para a parte inferior da página. A altura do cabeçalho pode variar de acordo com o conteúdo e pode ser 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>

Sem um cabeçalho fixo, posso simplesmente adicionaroverflow-y: scroll paradiv.sidebar e posso alegremente rolar todo o seu conteúdo se ele ultrapassar o fundo do contêiner. No entanto, estou com problemas em ter um cabeçalho de altura fixo e variável na parte superior da barra lateral e ter qualquer conteúdo sob essa rolagem se for muito longo para caber no contêiner.

div.sidebar devo fiqueposition: fixede eu gostaria muito de fazer isso sem hacks, e também torná-lo o mais cross-browser possível. Eu tentei várias coisas, mas nenhuma delas funciona, e não tenho certeza do que tentar a partir daqui.

Como posso fazer uma div dentro de umposition: fixed rolagem do contêiner somente na direção Y quando o conteúdo estourar o div contido, com um cabeçalho fixo de altura variável e indeterminada? Eu gostaria muito de ficar longe do JS, mas se eu tiver que usá-lo, eu vou.