2016-04-15 10 views
1

Gemäß der MDN article on Position Eigenschaft, position: sticky ist immer noch eine experimentelle API. Auch jeder Version Internet Explorer unterstützt es noch nicht. So,Was ist die Alternative zu Position: klebrig?

Gibt es eine Möglichkeit, den gleichen Effekt wie position: sticky mit oder ohne javaScript zu erreichen?

Ich denke, dass es möglich ist, diesen Effekt mit position: fixed und ohne Javascript zu erreichen. Weil die In diesem Artikel Abschnitt auf MDN page verhält sich genau wie Position sticky wurde darauf angewendet. Selbst wenn ich JavaScript deaktiviere, funktioniert es gut. Das Markup von MDN verwendet ich mit gefunden inspizieren Elemente ist wie

<div style="width: auto; max-height: none; top: 0px;" id="toc" class="toc toggleable"> ... 
</div> 

Wenn ich die Markierung nach oben nach unten gescrollt geändert fixed Klasse auf den Behälter div aufzunehmen. Ich weiß nicht, wie eine neue Klasse ohne Javascript hinzugefügt wird.

+0

funktioniert nicht für mich mit js deaktiviert, sind Sie sicher, dass Sie die Seite nach der Deaktivierung aktualisiert? – Kaiido

+0

@Kaiido tat ich nicht. Sie haben Recht, es funktioniert nicht mit js deaktiviert. Ich denke, dass sie js verwendet haben, die 'feste' Klasse hinzufügt, wenn die Seite nach unten gescrollt wird, um das' div' zu berühren. – user31782

Antwort

2

verwenden eine Javascript polyfill wie Fest sticky https://github.com/filamentgroup/fixed-sticky

auf der In diesem Artikel Abschnitt auf MDN die fixed Klasse über Javascript umgeschaltet wird, ich glaube nicht, es ist möglich, eine Klasse auf einem Element auf Blättern wechseln Ereignis ohne auf Javascript zurückgreifen zu müssen.

0

Sie können aber auch Sticky Bibliothek verwenden, die das gleiche Konzept implementiert: http://sticky.kissui.io/

Es ist ein Javascript/CSS-Bibliothek und einfach zu bedienen. Ein Beispiel ist:

<div data-kui-sticky> 
    Sticky position for this DIV 
</div>