Scorri parte del contenuto nel contenitore di posizione fissa

Question

Ho un div position: fixed in un layout, come barra laterale. Mi è stato chiesto di avere parte del suo contenuto rimanendo fisso in cima (internamente), e il resto dello scroll per scorrere se trabocca dal fondo del div.

Ho dato un'occhiata a this answer, tuttavia la soluzione presentata non funziona con i contenitori position: fixed o position: absolute, il che è un problema.

Ho fatto una dimostrazione JSFiddle del mio problema here. La grande quantità di testo dovrebbe idealmente scorrere, invece di traboccare nella parte inferiore della pagina. L'altezza dell'intestazione può variare a seconda del contenuto e può essere animata.

codice di esempio JSFiddle:

CSS:

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

HTML:

<div class="sidebar"> 
    <div id="fixed"> 
     Fixed content here, can be of varying height using jQuery $.animate()   
    </div> 

    <div id="scrollable"> 
     Potentially long content 
    </div> 
</div>​ 

Senza un colpo di testa fissa, posso semplicemente aggiungere overflow-y: scroll a div.sidebar e posso tranquillamente scorrere tutto il suo contenuto se trabocca il fondo del contenitore. Tuttavia, sto riscontrando problemi con l'intestazione fissa e variabile dell'altezza nella parte superiore della barra laterale e l'eventuale presenza di contenuto al di sotto di tale scorrimento se è troppo lungo per essere inserito nel contenitore.

div.sidebarmust soggiorno position: fixed, e mi piacerebbe molto fare questo senza alcun hack, così come rendere il più cross browser possibile. Ho provato varie cose, ma nessuna funziona, e non sono sicuro su cosa provare da qui.

Come posso fare un div all'interno di uno scroll position: fixed per il contenitore solo nella direzione Y quando il suo contenuto supera il div contenente, con un'intestazione fissa di altezza variabile e variabile? Mi piacerebbe molto stare lontano da JS, ma se dovessi usarlo lo farò.

Answer 1

sembra funzionare se si utilizza

div#scrollable { 
    overflow-y: scroll; 
    height: 100%; 
} 

e aggiungere padding-bottom: 60px-div.sidebar.

Ad esempio: http://jsfiddle.net/AKL35/6/

Tuttavia, non sono sicuro perché deve essere 60px.

Inoltre, vi siete persi la f da overflow-y: scroll;

Answer 2

Impostare il div scorrevole per avere un max-size e aggiungere overflow-y: scroll; alle sue proprietà.

Modifica: prova a far funzionare il jsfiddle, ma non sta scorrendo correttamente. Ci vorrà del tempo per capire.

Answer 3

ho cambiato div scorrevole per stare con posizione assoluta, e tutto funziona per me

div.sidebar { 
    overflow: hidden; 
    background-color: green; 
    padding: 5px; 
    position: fixed; 
    right: 20px; 
    width: 40%; 
    top: 30px; 
    padding: 20px; 
    bottom: 30%; 
} 
div#fixed { 
    background: #76a7dc; 
    color: #fff; 
    height: 30px; 
} 

div#scrollable { 
    overflow-y: scroll; 
    background: lightblue; 

    position: absolute; 
    top:55px; 
    left:20px; 
    right:20px; 
    bottom:10px; 
} 

DEMO with two scrollable divs

Answer 4

In realtà questo è modo migliore per farlo quella. Se viene utilizzato height: 100%, il contenuto si spegne il confine, ma quando è 95% tutto è in ordine:

div#scrollable { 
    overflow-y: scroll; 
    height: 95%; 
}