Tutorial de Bubble.io - Desarrollar la navegación pegajosa (parte superior fija, parte inferior fija)

In diesem Video zeigen wir euch wie man eine Sticky Navigationsleiste in Bubble entwickelt. Oftmals möchte man, dass wenn der User die Seite scrollt trotzdem die Navigationsleiste oben bleibt.

Transcripción del vídeo:

Hallo, mein Name ist Chris Strobl und ich zeige ich heute, wie wir eine Sticky Navigation, also ein Navigationsleiste, die oben bleibt oder unten am Browser im Bubble entwickeln können. Als erstes gehen wir hier unter Container in das Feld Floating Group. Hierfür fügen die Eimer ein 69 0 und nennen diese Navigationsleiste. Dann benutze ich Frames. Ich habe ein Video bereits zu Frames gemacht. Das könnt ihr euch anschauen, wie man das benutzt.

Und füge einen Navigation hinzu Header und kopiere diesen nun in diese Grube rein. Das seht ihr hier oben. Ob das passt? Sobald das eingefügt ist, passe sich auch hier die Größe auf 100 Pixel an. Damit das gleich ist. Und um jetzt zu schauen, ob wir tatsächlich das sehen, füge ich einfach ein Icon ein, relativ weit unten. Das ist jetzt bei 2000 Pixel und wir gehen einmal ins Preview, um uns das Ganze anzusehen. Ich scrolle runter und jetzt sieht das Icon erscheint beim Scrollen, aber die Navigationsleiste bleibt oben. Wir können das gleich jetzt auch unten machen. An der Seite nämlich eine Floating Group, dafür die die ganz runter.

Ich mache den Background Style nun auf blau mit wir das Ganze sehen aber die Floating Group am Futter. Diese wiederum lassen wir am Bottom floaten und dadurch quasi haben wir die Möglichkeit auch hier über den Elementen am unteren Grund zu arbeiten. Ich füge hier einen Button hinzu.

Und wir schauen uns das Ganze jetzt einmal noch mal im Preview an.. Und es sieht nun einmal eine Gruppe oben einmal an. Die Gruppe unten und wenn wir scrollen, verändern sich diese Gruppen nicht, aber der Canvas dazwischen. Somit konnte wir sehen, wie wir im Bubble eine Sticky Navigation relativ einfach entwickeln können.

Wenn euch dieses Video gefallen habt, klickt gerne auf den Like-Button und subscribe unseren Channel bei Fragen gerne in die Kommentare. Ich wünsche euch weiterhin viel Erfolg und auf bald.