Ich habe gerade in FF32 & amp; Safari 7, mit position: sticky . Und es funktioniert perfekt mit top: 0px oder left: 0px (um horizontal zu bleiben), aber es scheint nicht zu funktionieren, wenn ich bottom: 0px oder noch besser versuche, kombiniere bottom: 0; left: 0 es setzt sich nicht auf den unteren Rand von das Element. Dieses Verhalten könnte hier ausprobiert werden: Ссылка , indem einfach das Attribut top: 10px auf% gesetzt wird Code%. Soll das nicht funktionieren?
Ich denke, es ist ein gültiger Anwendungsfall, etwas auf die gleiche Weise an den Boden zu kleben, wie man etwas an die Spitze kleben möchte. In unserem Fall ist das so, weil ich daran interessiert bin, etwas an der horizontalen Bildlaufleiste zu haben, aber ich möchte, dass sich dieses Element am unteren Rand des übergeordneten Elements befindet.
Wie auch immer, irgendwelche Vorschläge und zusätzliche Informationen sind willkommen.
funktioniert. Beachten Sie, dass sticky -Elemente relativ zu ihren Eltern sind.
Ссылка (in Firefox)
In diesem Fall ist <section> (der blaue Bereich) das übergeordnete Element.
Es funktioniert nicht mit Stickyfill obwohl Ссылка
Ich schlage vor, dass du ein bisschen länger damit herumspielst, bis du den Dreh raus hast.
Lassen Sie es mich wissen, wenn Sie ein JS-Plugin benötigen, das sich wie position: sticky verhält, ohne position: sticky verwenden zu müssen (kann nicht auf die Browser-Unterstützung oder ein stärkeres Polyfill warten).
position:sticky; hat keine browserübergreifende Unterstützung. Sehen Sie dies , um zu sehen, welche Werte Sie sonst angeben können
Von dem oben angegebenen Link:
Eigenschaftswerte
- static : Standardwert. Elemente werden in der Reihenfolge gerendert, wie sie im Dokumentfluss
angezeigt werden- absolute : Das Element wird relativ zu seinem ersten positionierten (nicht statischen) Vorgängerelement
positioniert- behoben : Das Element ist relativ zum Browserfenster
positioniert- relativ : Das Element wird relativ zu seiner normalen Position positioniert, sodass "left: 20" dem Element LEFT
des Elements 20 Pixel hinzufügt Position- initial : Setzt diese Eigenschaft auf ihren Standardwert. Lesen Sie über das erste
- erben : Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über inherit
Wenn Sie etwas am unteren Rand des übergeordneten Containers haben möchten, haben Sie 2 Möglichkeiten.
position:relative; ). position:absolute; zu verwenden und dann die Eigenschaften left, right, top und bottom festzulegen. Eine weitere Option (wenn Sie möchten, dass das Element dauerhaft genau an der gleichen Stelle angezeigt wird - es sei denn, Sie fügen js hinzu, um seine Eigenschaften zu ändern), verwenden Sie position:fixed; und dann links, rechts, oben und untere Eigenschaften
Überprüfen Sie diesen Link, um die Unterschiede zwischen den Optionen zu sehen
Wenn Sie ein Hybrid zwischen diesen beiden Features möchten, können Sie dies mithilfe von scroll-Ereignissen mithilfe von JavaScript / jQuery erreichen. Diese Methode würde (wahrscheinlich) Browser-übergreifend sein
mit dem folgenden HTML:
%Vor%und das folgende css:
%Vor%Sie sollten ein klebriges div in der unteren linken Ecke der Seite haben
Beispiel: Ссылка