Erstelle das iOS UITableView mit HTML neu
Ich versuche, eine Seite zu erstellen, auf der mehrere Abschnitte vorhanden sind, und beim Scrollen wird die Kopfzeile, auf der Sie sich befinden, immer oben auf der Seite (in einem festen Element) angezeigt. Ich möchte den gleichen Effekt erzielen wie auf dem iPhone, wo Sie beim Scrollen den alten Header aus dem Weg schieben und ihn ersetzen.
Ich habe es mit Listen gesehen, aber ich möchte es mit mehreren HTML5-Abschnitten machen.
Zum Beispiel:
%Vor%Hat jemand eine Idee?
Danke
3 Antworten
Hier geht's, ziemlich ähnlich:
HTML:
%Vor%CSS:
%Vor%JQuery:
%Vor%Im Wesentlichen erstellen wir also eine grundlegende Kollisionserkennung. Wenn wir nach unten scrollen, erkennen wir, ob das untere Ende des aktuellen Headers mit dem Anfang des nächsten Headers kollidiert. Wenn dies der Fall ist, tauschen wir es aus. Wenn wir nach oben scrollen, erkennen wir, ob der Anfang des aktuellen Headers mit dem Boden des vorherigen Inhaltscontainers kollidiert und den Austausch durchführt.
Wenn Sie dies auf die nächste Ebene bringen, um das iPhone-Menü genauer zu emulieren, möchten Sie wahrscheinlich die Header innerhalb des DOM im Handumdrehen neu positionieren, wenn sie kollidieren, was die Illusion von einem "den anderen rausschieben" würde des Weges ", dann, sobald der vorherige aus dem Bildschirm ist, würden Sie die feste Positionierung auf den neuen Header anwenden. Diese Demo sollte Sie zumindest auf den richtigen Weg bringen:)
Hoffe, das hilft!
Ich wollte das schon lange machen und das Sehen von @ AlienWebguys Arbeit inspirierte mich dazu, es endlich anzugehen. Sein JSFiddle war beeindruckend, aber er brauchte viel Arbeit. Ich denke, dass diese Lösung in meiner Produktions-App so ziemlich fertig ist.
HTML:
%Vor%CSS:
%Vor%JAVASCRIPT: (beruht auf jQuery)
%Vor%Ich habe nicht die iPhone-Version gesehen, über die du sprichst, aber wie du es beschreibst Ich habe eine Vorstellung davon, wie es ist.
Das Problem ist, wie ich sehe, dass die Header zwei Kontexte haben. Erstens sind sie in der Seite und zweitens sind sie in einem festen Element am oberen Rand der Seite. Auch Sie haben nicht gesagt, aber ich nehme an, dass, wenn Sie den anderen Weg scrollen würden, die Überschriften in die entgegengesetzte Richtung ändern müssten.
Ein Ansatz wäre, dem festen Element eine feste Höhe und einen versteckten Überlauf zu geben. Dann haben Sie ein Innerdiv, das eine Kopie aller Seitenheader enthält. Geben Sie die relative Position des inneren Teils an. In JavaScript fügen Sie allen Headern, die sich auf der Seite befinden, die ausgelöst werden, wenn sie den oberen Rand des Fensters erreichen, um die Animation auszulösen, ein Ereignis hinzu. Verwenden Sie jQuery, um die Position des inneren Teils des festen Elements zu animieren, so dass es den nächsten Header anzeigt.
Tags und Links jquery iphone uitableview html5 header