Benötigen Sie ein fest positioniertes div innerhalb einer absolut positionierten div

Question

Ich benutze das Snap.js-Plugin - (es können Sie Scroll Side Side Schubladen/Panels erstellen).

Es funktioniert, indem Sie 3 absolut positionierte divs erstellen, von denen einer den Hauptinhalt enthält.

Gibt es eine Möglichkeit, ein div am oberen Rand des Fensters zu positionieren, wenn es sich innerhalb des absolut positionierten div befindet.

Im Moment bekomme ich nur das feste div an die Spitze des absolut positionierten div, anstatt an der Spitze des Browsers. Wenn ich scrolle, bleibt das Div am oberen Rand des Hauptinhalts, nicht aber am Fenster.

Zum Beispiel:

<div style="position:absolute;"> 

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

</div> 

Im Moment ist Javascript bin mit der Scroll-Offset zu verfolgen und manuell die Spitzenposition des Kind div einstellen, die für die Leistung nicht ideal ist.

Jede Hilfe wird geschätzt!

Answer 1

ich eine Geige gemacht habe meine Javascript Abhilfe zeigt - es Bammel, wenn im Internet Explorer, alle Ideen zu scrollen.

<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

Ich vermute, ein wenig über das, was Sie zu tun versuchen, aber Sie könnten für so etwas suchen:

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

und wenden Sie das folgende 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 Geige: http://jsfiddle.net/audetwebdesign/pTJbW/

Um einen festen Block in Bezug auf ein Blockelement zu erhalten, müssen Sie die absolute Positionierung verwenden. Die feste Positionierung erfolgt immer in Bezug auf das Root-Element oder den View-Port, so dass position: fixed Ihnen nicht helfen wird.

Was ich getan habe, ist ein .local-wrap Container zu definieren, mit zwei Kind-Blöcke, eine, die absolut an der Spitze .local-wrap positioniert ist und die andere in regelmäßigen Fluss. Ich habe position: relative verwendet, um es unter .fixed zu positionieren, aber ein oberer Rand hätte auch funktioniert.

Ich habe einige Höhen korrigiert, um Scroll-Inhalte im lokalen Fenster/Port zu demonstrieren, aber das kann je nach Design und Anwendung geändert werden.

Haftungsausschluss

Ich bin nicht vertraut mit snap.js so kann es andere Überlegungen zu berücksichtigen.

Kommentar zu CSS3 Transform und festen Elemente

Nach den CSS3-Spezifikationen, wenn Sie ein auf ein Element transformieren anwenden, nennen es div.transformed, dann schafft div.transformed einen neuen Stapelkontext und dient als enthaltend Block für alle untergeordneten Elemente mit fester Position, die es enthält, weshalb der Kontext für feste Positionen in Ihrem Szenario nicht oben im Fenster bleibt.

Als Referenz siehe Mozilla Developer Network -> CSS Reference -> Transform