Unterschied zwischen position:sticky und position:fixed?

Die Dokumentation war ziemlich schwer zu verstehen, da ich bin neu in CSS. Also kann bitte jemand erklären, ist der eigentliche Unterschied zwischen position:sticky und position:fixed? Ich würde auch schätzen, ein Beispiel.

Ich durchgemacht habe https://developer.mozilla.org/en-US/docs/Web/CSS/position und ein paar andere Artikel, aber ich noch nicht bekommen.

InformationsquelleAutor | 2013-10-21
  1. 28

    position: fixed immer fixiert, ein element an eine position innerhalb seiner scrolling-container oder den viewport. Egal, wie Sie navigieren den container wird es bleiben in exakt der gleichen position und nicht auf den Fluss der anderen Elemente innerhalb des Containers.

    Ohne auf die spezifischen details, position: sticky im Grunde wirkt wie position: relative bis ein element gescrollt wird ab einem bestimmten offset, in dem Fall verwandelt es sich in position: fixed, wodurch das element "kleben", um seine position, anstatt gescrollt angezeigt. Es bekommt schließlich hängen geblieben ist, wie es kommt, gescrollt, wieder in Richtung seiner ursprünglichen position. Mindestens, das ist, wie ich es verstehe in der Theorie.

    Der Grund, warum ich möchte vermeiden, ins Detail zu gehen ist, weil position: sticky ist Marke neue, experimentelle (wie gezeigt in das Dokument, das Sie verlinken), und noch nicht abgeschlossen. Selbst das, was ich oben erklärt habe, kann durchaus in Naher Zukunft ändern. Sie werden nicht in der Lage zu verwenden position: sticky eh noch (hoffentlich ändert sich das innerhalb des nächsten Jahres).

    Mozilla hat vor kurzem seine Umsetzung position: sticky hier. Es ist sehr Wert eine Uhr.

    • Ich bin mit position:sticky, und bei der ersten funktioniert es einwandfrei... geht aus der relativen Darstellung zu fixen. Aber auf einer längeren Seite, schließlich, wenn ich scrollen nach unten lang genug ist, das sticky-header verschwindet wie die andere Seite Objekte.
    • Sticky sieht sehr cool und praktisch. Hoffe, es wird umgesetzt werden, das alle Browser bald. Ich habe gesehen, wie diese Wirkung bei einigen Webseiten, aber erstellt mit javascript. mit sticky kann es zu reduzieren die Menge an code und Komplexität.
    InformationsquelleAutor BoltClock
  2. 21

    Finden Sie das selbsterklärende Beispiel für bessere Klarheit. CODEPEN

    Feste Position:

    1. Einem element mit fester position angezeigt wird, mit Bezug auf die viewport oder das browser-Fenster selbst. Es bleibt immer an der gleichen Stelle, auch wenn die Seite gescrollt wird.

    2. Es hat keine Auswirkung auf den Fluss der anderen Elemente in der Seite, also die nicht belegen keinen bestimmten Platz(wie position: absolute).

    3. Wenn es definiert ist, in einigen anderen container (div mit oder ohne relative/absolute position), noch ist es positioniert, mit Bezug auf den browser und nicht die container. (Hier unterscheidet es sich mit position: absolute).

    Sticky Position:

    1. Einem element mit klebrigen position positioniert ist, basierend auf der Benutzer die scroll-position. Als @Boltclock erwähnt, ist es im Grunde wirkt wie position: relative, bis ein element gescrollt wird ab einem bestimmten offset, in welchem Fall es stellt sich in position: fixed. Wenn es zurückgescrollt wird es wieder auf seine bisherige (relative) position.

    2. Einfluss auf den Fluss der anderen Elemente in der Seite dh nimmt einen bestimmten Platz auf der Seite(genau wie position: relative).

    3. Wenn es definiert ist, in einige container, positioniert ist, mit Bezug auf die container. Wenn der container hat einige "overflow" (Blättern), abhängig von der scroll-offset wird es position:fixed.

    Also, wenn Sie wollen, zu erreichen festgelegter Funktionalität, sondern in einem container, den klebrigen.

    InformationsquelleAutor Pransh Tiwari
Schreibe einen Kommentar