2016-01-03 8 views
6

Versuch, ein Menü zu erstellen, das die ganze Zeit an der Spitze der Website angeklebt ist. Folgte Dokumente von zub.foundation, aber .sticky verhält sich immer auf die gleiche unerwartete Weise. Oder vielleicht bekomme ich nicht offensichtlich?Zurb Foundation 6 Sticky-Switch-Status am Ende der Ansichtsfensterhöhe ".is-verankert .is-at-bottom"

Bitte überprüfen Sie für den Wiederaufbau hier: http://codepen.io/mister-hansen/pen/wMgrPm

Wenn Site nach unten gescrollt, und drücken Sie die genau Höhe der anfänglichen Darstellungs, klebrig-Plugin ändert das Element .sticky von is-stuck is-at-top zu: .is-anchored .is-at-bottom so .sticky verschwinden .

Vielen Dank.

UPDATE Der erste Teil von Dokumentation: foundation.zurb.com/sites/docs/sticky.html erklärt das beschriebene Verhalten. Wegen des Standardkörpers {height: 100%} css wird der Körper genau mit max interpretiert. Höhe des Ansichtsfensters.

Also in meinem Fall Lösung ist a) Override Höhe des Körpers mit Auto. Aber besser b) Vermeiden Sie einfach, die Sticky-Funktionalität für den beabsichtigten festen Header zu verwenden.

+1

Welche Version von Foundation 6 verwenden Sie? –

+0

Erstellt mit Yeti Launch, für Websites - Basic. Readme sagt: # [Foundation für Sites] (http://foundation.zurb.com) (v6.0) –

+0

Update zu Foundation 6.1.1 und versuchen Sie es erneut. Viele Bugfixes wurden seit 6.0 implementiert. Wechseln Sie zum Aktualisieren in das Stammverzeichnis Ihres Projekts und führen Sie "bower update" aus. –

Antwort

4

Ich legte die Datenprüfung-jedes Plugin-Option auf 0, um jedes Scroll-Ereignis neu zu berechnen. Jetzt wird die Höhe des Ansichtsfensters erneut berechnet, wenn Inhalt dynamisch geladen wird, beispielsweise wenn unendlicher Bildlauf verwendet wird.

+0

Ich hatte ein ähnliches Problem mit einer endlos scrollenden Liste. Das Attribut data-check-everly = "0" scheint das Problem behoben zu haben. http://foundation.zurb.com/sites/docs/sticky.html#js-options.htm#js-options – mpwhitt

Verwandte Themen