Element pozycji CSS "naprawiony" wewnątrz przewijanego kontenera

Question

Zastanawiam się, czy ktoś znalazł rozwiązanie tego problemu?

szukam rozwiązania do mocowania elementu do górnej części pojemnika przewijania

HTML:

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

wszystkie „elementy” mają position:relative,

pojemnik posiada następujące CSS:

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

Chcę, aby nagłówek pozostał na szczycie o f pojemnik, niezależnie od pozycji przewijania i elementów przewijających się pod nim.

CSS tej pory:

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

wszystkie elementy są elementy blokowe, a nie mogę przenieść nagłówek na zewnątrz pojemnika. jquery nie ma opcji w tym momencie.

Answer 1

Rozwiązaniem w tym przypadku byłoby pop tytuł zewnątrz elementu przewijania:

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

Chociaż powinieneś mieć elementy lepiej semantycznych, jeśli to możliwe (tylko zgadywania tutaj):

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

Answer 2

jQuery UI dodał do tego celu narzędzie użytkowe position(), które ułatwiłoby Ci życie.

$("#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" 
}); 

Zdecydowanie mi pomógł.

Answer 3

myślę rozwiązanie przechodzą z position:sticky. Wydaje się, że jest to podobne do position:fixed, ale respektuje względną pozycję względem rodzica.

Niestety, jest to funkcja eksperymentalna i jest obsługiwana tylko w Chromium. Możesz zobaczyć więcej szczegółów w this test page.

Czysty roztwór css, która przychodzi mi do głowy to z niewielką zmianą w znacznikach. Możesz ustawić kontener tylko dla "elementów" w następujący sposób:

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

I przepełnij ten wewnętrzny pojemnik. Teraz twój nagłówek trzyma się u góry.

Here's a working demo.