Potrzebuję ustalonego pozycjonowanego elementu div wewnątrz bezwzględnie umieszczonego elementu div

Question

Używam wtyczki Snap.js - (umożliwia tworzenie przewijanych bocznych szuflad/paneli).

Działa, tworząc 3 absolutnie ustawione divy, z których jeden zawiera główną treść.

Czy istnieje sposób umieszczenia elementu div ustalonego na górze okna, gdy znajduje się wewnątrz bezwzględnie umieszczonego elementu div.

W tej chwili dostaję stały div, aby przypiąć do początku bezwzględnie pozycjonowanej części div, a nie do górnej części przeglądarki. Kiedy przewijam, element div pozostaje stały na górze głównej zawartości, ale nie na oknie.

Na przykład:

<div style="position:absolute;"> 

    <div style="position:fixed;top:0"> 
     <!-- some content which needs to be pinned to top of window --> 
    </div> 

</div> 

Obecnie używam javascript, aby śledzić zwój offsetu i ręcznie ustawić górną pozycję div dziecka, które nie jest idealny pod kątem wydajności.

Każda pomoc doceniona!

Answer 1

Zrobiłem skrzypce pokazując mój javascript obejścia - to trema podczas przewijania w programie Internet Explorer, jakieś pomysły.

<div id="displayed-content" class="snap-content scrollable"> 
    <div><!-- regular content --></div> 
     <div><!-- fixed content --></div> 
    <div><!-- footer content --></div> 
</div> 

http://jsfiddle.net/bxRVT/

Answer 2

Domyślam się trochę o tym, co staramy się robić, ale może być patrząc na coś takiego:

<div class="local-wrap"> 
    <div class="fixed"> 
     Some content which needs to be pinned to top of window 
    </div> 
    <div class="port"> 
     Regular content... 
    </div> 
</div> 

i zastosować następujące CSS:

.local-wrap { 
    position: relative; 
} 
.local-wrap .fixed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: lightgray; 
    width: 100%; 
    height: 5.00em; 
} 
.local-wrap .port { 
    position: relative; 
    top: 5.00em; 
    min-height: 10em; 
    height: 15em; 
    overflow: auto; 
    border: 1px solid gray; 
    border-width: 0 1px 1px 1px; 
} 

Demo skrzypce: http://jsfiddle.net/audetwebdesign/pTJbW/

Zasadniczo, aby uzyskać stały blok w odniesieniu do elementu blokowego, należy użyć pozycjonowania bezwzględnego. Naprawiono pozycjonowanie zawsze w odniesieniu do elementu głównego lub portu widoku, więc position: fixed nie pomoże.

To, co zrobiłem, to zdefiniowanie kontenera .local-wrap, z dwoma blokami podrzędnymi, jednym, który jest umieszczony absolutnie na szczycie .local-wrap, a drugi w regularnym przepływie. Użyłem position: relative, aby ustawić go poniżej .fixed, ale górny margines również zadziałałby.

Naprawiłem kilka wysokości, aby zademonstrować przewijanie zawartości w lokalnym oknie/porcie, ale można to zmienić w zależności od projektu i aplikacji.

Zastrzeżone

nie jestem zaznajomiony z snap.js więc mogą istnieć inne czynniki do rozważenia.

Skomentuj CSS3 Transform i stałych elementów

Według specyfikacji CSS3, jeśli stosuje transformację do elementu, nazwać div.transformed, następnie div.transformed tworzy nowy kontekst układania i służy jako zawierający blok dla wszystkich zawartych w nim elementów potomnych o stałej pozycji, dlatego w scenariuszu kontekst ustalonej pozycji nie pozostaje u góry okna.

Dla porównania, patrz Mozilla Developer Network -> CSS Reference -> Transform