Sticky-top div mit absoluter Positionierung

Ich bin mit absoluter Positionierung, um eine div füllt das ganze browser-Fenster. Aber ich wan ' T, kombinieren diese mit einem sticky-div, der manchmal da ist und manchmal nicht.

Machen die Dinge ein wenig klarer, überprüfen Sie heraus dieses jsFiddle: http://jsfiddle.net/henrikandersson/aDdRS/

Möchte ich die "top", "left" und "subheader" zu bleiben, wo Sie sind zu allen Zeiten.
Ich will auch die "content" - div zu füllen, was Links im Fenster.
Aber manchmal möchte ich das display "alert" - div vor dem "content".
So weit, So gut, wie Sie sehen können, in der jsFiddle. Aber, ich will "wachsam" zu bleiben, "subheader" und bleiben dort beim scrollen. Wie Sie sehen können, wenn Sie die Fenstergröße ändern, "alert" wird nun gescrollt werden, zusammen mit "Inhalte", die ich nicht wollen, es zu sein.

Hat jemand eine Idee wie man dieses Problem lösen?

BEARBEITEN:
Ich machte eine änderung in mein jsFiddle, legte ich die "Warnmeldung" wo es sein sollte (zwischen subheader und Inhalt-Bereich). Wie Sie sehen können ( http://jsfiddle.net/henrikandersson/aDdRS/12 ) es nicht schieben Sie den "content-Bereich" nach unten, da content-Bereich ist top:20px. Und ich kann nicht mit der set-top:40px zum Beispiel seit "alert" sollte in der Lage sein, variieren in der Höhe, und ich will content-Bereich haben die gleichen css-mit oder ohne die Warnung oben.

EDIT #2:
Diese Frage befasst sich mit dem gleichen problem, aber es gibt keine Lösung für diese Frage. Scheint, es ist nicht möglich, ohne JavaScript zu verwenden:
variable Höhe scrollen, div, das relativ positioniert, um variable Höhe Geschwister

Würde es möglich sein, auf die <div id="alert"></div> zu werden, nicht, wenn es leer ist, oder in anderen Worten, drucken Sie einfach das div, wenn es einen Inhalt?
ja, es sollte möglich sein, ein - /ausblenden des div, aber das ist Teil des Problems (siehe edit oben)
Ich meine nicht ein - /ausblenden mit CSS, aber vollständig zu entfernen Sie es aus dem source-code-id leer? Wenn dem so ist, mir bearbeitet fiddel / Ihren Bedürfnissen passt, wenn nicht, es passt Ihre Bedürfnisse in Browsern mit supprt für :empty pseudo-Klasse

InformationsquelleAutor Henrik Andersson | 2011-11-30

  1. 5

    2018-6-18

    Wähle ich den CSS Weg mit position: sticky.

    dass https://github.com/abouolia/sticky-sidebar .

    nicht für mich (ich bin mit Vue.js 2.0 SPA mit vue-router & vuex)

    Ich will auch das element position: absolute zuerst

    und dann position: sticky

    Lösung

    1. übergeordneten HTML-element verwenden position: absolute haben die richtige position.

    (vergessen Sie nicht die height für Eltern. zum Beispiel height:100%)

    1. Kind HTML-element position: sticky

    Arbeit für mich.
    Sticky-top div mit absoluter Positionierung

    Sticky-top div mit absoluter Positionierung

    Ich machte ein Youtube-video auf diese Antwort: (30 Sekunden) youtube.com/watch?v=LVlD6NmCjts&feature=youtu.werden
    Ich schaffte es mit dem Gegenteil: Eltern-klebrig und Kind als absolute (das gibt den Eltern eine Höhe von 0). Aber danke für den Hinweis in die richtige Richtung 🙂
    Vielen Dank für das video, gute Antwort. Ich war auch in der Lage, diese zu arbeiten.

    InformationsquelleAutor NamNamNam

  2. 4

    Bearbeiten

    update mit einigen Verbesserungen

    http://jsfiddle.net/aDdRS/11/

    ersten post

    Warum nicht Blättern Sie einfach die .content und nicht die .content-area

    http://jsfiddle.net/aDdRS/8/

    Wenn #alert leer ist, ist es nicht sichtbar.
    Da die Inhalte in deinem Beispiel hat die Höhe 100%, der gesamte scrollbar nicht sichtbar sein wird. In meinem Beispiel überlauf hat keinen Einfluss auf die div.
    Aktualisiert meine Geige
    Ja, das ist fast das, was ich will. Das problem ist, dass alert kann nicht variieren in der Höhe jetzt. Wenn es keine andere Möglichkeit gibt, dies zu tun ich denke, ich kann damit Leben. Weißt du, wie gut #alert + #content und #Warnung:leer + #content funktioniert auch in älteren Browsern, sagen IE7?
    Ich denke, es ist nicht viel was wir dagegen machen können. Zu schlagen float:top und float:bottom des W3C 🙂

    InformationsquelleAutor yunzen

  3. 1

    Alert scrollt mit dem Inhalt, weil es in den content-Bereich, die overflow-y: auto.

    Verschieben Sie Sie aus dem Inhalts-Bereich (legen Sie es in zwischen den subheader-und content-Bereich), und entfernen Sie die position: absolute (und oben/Links/rechts/unten) Attribute aus dem content. In diesem Beispiel sehe ich keinen Grund für den content absolut positioniert, normalen Fluss bringen, wo es sein will.

    Yep, platzieren Sie den Alarm zwischen dem subheader und der content-Bereich ist, was ich will, jedoch wenn ich entfernen Sie die absolute Positionierung und oben/Links/unten/rechts, Inhalt füllt nicht die gesamte Höhe des Fensters, die ich es brauche.
    Dann fügen Sie height: 100%?
    Aber es ist nicht 100%, es ist 100% minus der Höhe des divs oben.

    InformationsquelleAutor James Clark

  4. 0
    • Hinzufügen " Feste Höhe & Breite 100% zu Alarm + position:fixed
    • "Padding-top Inhalt
    • Einzige Nachteil ist natürlich die zusätzliche Polsterung, wenn es keine Warnung...

    Sehen http://jsfiddle.net/aDdRS/5/

    Ja, das problem ist, ich brauche das layout (die Polsterung) zu dem gleichen, mit oder ohne Warnung. Auch dies macht die Bildlaufleiste versteckt im Teil hinter der Warnung.

    InformationsquelleAutor ptriek

  5. 0

    Ich wählte zu gehen mit einem JavaScript-Ansatz, nachdem alle. Hätte am Liebsten eine Reine CSS-Ansatz, aber mein Bedürfnis nach IE8-Unterstützung im Wege Stand. Diese Antwort von Myles Grau ist ziemlich viel, was ich Tat - https://stackoverflow.com/a/4933509/940517

    InformationsquelleAutor Henrik Andersson

Schreibe einen Kommentar