Wie klebrig Scroll Sidebar ähnliches Verhalten wie Facebook-Feed Sidebar bauen

stimmen
0

Ich arbeite auf dem Aufbau von klebrigem Sidebar Verhalten , das neben einer vertikalen Zufuhr läuft , die zu einem Facebook - Feed auf Desktop - Web sehr ähnlich ist. position: stickyeignet sich gut für den einfachen Gebrauch Fall , in dem die Seitenleiste kürzer als die Höhe des Bildfensters ist. Allerdings , wenn Ihre Sidebar größer ist als der Darstellungsbereich der Seitenleiste braucht einige Scrolling - Mechanismus zu haben , so dass Sie den Boden der Seitenleiste sehen können , wie Sie den Feed nach unten scrollen.

Ich versuche, die Facebook Sidebar klebrig blättern hier neu zu erstellen.

Der beste Weg, um das gewünschte Verhalten zu verstehen, ist Ihren Facebook-Feed zu testen und Ihre Bildschirmhöhe schrumpft, so dass Ihre Ansichtsfenster kleiner als Sidebar Höhe. Ich werde versuchen, hier zusammenfassen:

Wenn Ihr Ansichtsfenster ist größer als Sidebar (einfacher Fall)

  1. Die Sidebar verhält sich genau so, wie Sie mit der Position erwarten würden: klebrig. Die Seitenleiste bleibt an der gleichen Stelle und folgt wie Sie nach unten scrollen und nach oben.

Wenn Ihr Ansichtsfenster kleiner als Sidebar

  1. Wenn Sie mit dem Futter zunächst die Seitenleiste scrollt nach unten scrollen (sie erscheinen zusammen fixiert)
  2. Wenn Sie auf der Unterseite der Seitenleiste erhalten, sperrt es dann am Boden und wie Sie nach unten scrollen mehr, erscheint die Seitenleiste jetzt klebrig mit dem Boden fixiert
  3. Wenn Sie jetzt sichern blättern, sobald die Seitenleiste wieder auf Ihren Haupteinzug angebracht erscheint, und scrollt mit dem Haupt Feed. Sobald Sie die oben in der Sidebar getroffen ist es dann klebrig mit der Spitze befestigt.
  4. So zwischen diesen beiden Zuständen (oben festgelegt, wenn Scrollen nach oben, unten fixierte beim Scrollen nach unten), die Seitenleiste blättert im Einklang mit dem Hauptfutter.

Es ist eine sehr schöne Scrollen Erfahrung, aber sehr schwer zu reproduzieren.

Ich habe die Zustände in den Schritten 1-3 oben klebrig , indem Position mit einer aufgelistet erreicht topPosition, und wenn Sie nach unten scrollen, blättern Ereignisse mit und einige Darstellungsfeld / Berechnungen Sidebar Höhe der Höhendifferenz und das Einstellen der bestimmen topCSS - Wert , so dass es verriegelt , wenn der Boden ist mit dem Bildschirm ( im wesentlichen ausgerichtet initialTop - (sidebarHeight - viewportHeight). ich nicht Schritte herauszufinden 4 kann und 5. das beste , was ich war Übergang zwischen den beiden tun könnten topWerte je nach Scrollrichtung , aber es ist eine sehr schlechte UX.

Ich habe ein Sandbox Beispiel eines Layout hier: https://codesandbox.io/s/fragrant-microservice-89b7z?fontsize=14&hidenavigation=1&theme=dark

Es gibt eine grundlegende Layout mit zwei Spalten (links Sidebar und Hauptfutter). Und es gibt eine Komponente reagieren genannt , StickyScrolldie um die Säule herum wickelt und hat die gesamte Logik , die aktualisieren topWert. Dies kann eine völlig falsche Start in eine gute Lösung sein, aber jede Hilfe wird sehr geschätzt.

Veröffentlicht am 13/02/2020 um 21:51
quelle vom benutzer
In anderen Sprachen...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more