Elemento posizione CSS "fisso" all'interno del contenitore a scorrimento

Question

Mi chiedo se qualcuno ha trovato una soluzione per questo?

Sto cercando una soluzione per collegare un elemento alla parte superiore di un contenitore scorrimento

HTML:

<div class="container"> 
    <div class="header">title</div> 
    <div class="element">......</div> 
    ... (about 10-20 elements) ... 
    <div class="element">......</div> 
</div> 

tutti gli "elementi" hanno position:relative,

il contenitore ha il seguente CSS:

.container { 
    position:relative; 
    width:200px; 
    height:400px; 
    overflow-y:scroll; 
} 

voglio che l'intestazione rimanga in cima o f il contenitore, indipendentemente dalla sua posizione di scorrimento e dagli elementi che scorrono sottostanti.

CSS finora:

.header { 
    position:absolute; /* scrolling out of view :-(*/ 
    z-index:2; 
    background-color:#fff; 
} 
.element{ 
    position: relative; 
} 

tutti gli elementi sono elementi di blocco, e non posso spostare l'intestazione all'esterno del contenitore. jquery non è un'opzione a questo punto.

Answer 1

La soluzione in questo caso sarebbe di pop il titolo esterno dell'elemento di scorrimento:

<div class="header">title</div> 
<div class="container"> 
    <div class="element">......</div> 
    <div class="element">......</div> 
</div> 

Anche se probabilmente si dovrebbe avere elementi meglio semantici, se possibile (solo indovinare qui):

<h3>title</h3> 
<ul> 
    <li>......</li> 
    <li>......</li> 
</ul> 

Answer 2

jQuery UI ha aggiunto un metodo di utilità position() solo per questo scopo che potrebbe semplificarti la vita.

$("#someElement").position({ 
    of: //Element to position against, 
    my: //which position on the element being positioned, 
    at: //which position on the target element eg: horizontal/vertical, 
    offset: // left-top values to the calculated position, eg. "50 50" 
}); 

Definitivamente mi ha aiutato.

Answer 3

Penso che la soluzione passi con position:sticky. Sembra che sia come position:fixed ma rispetti la posizione relativa al suo genitore.

Sfortunatamente questa è una funzione sperimentale ed è supportata solo in Chromium. È possibile visualizzare ulteriori dettagli in this test page.

La soluzione di css pura che mi viene in mente è con un piccolo cambiamento del markup. È possibile impostare un contenitore solo per gli "elementi" in questo modo:

<div class="cont_elements"> 
     <div class="element">......</div> 
     ..... 
</div> 

E dare il trabocco a questo contenitore interno. Ora il tuo colpo di testa è in cima.

Here's a working demo.