Mobirise Tutorials

Sticky Top

Beispiel für einen fixierten Header mit Bootstrap Class Sticky-Top

Sticky Top Effekt

Ein Beispiel in Mobirise mit der Bootstrap class="sticky-top": getbootstrap.com

Um einen Block am oberen Bildschirmrand zu fixieren, kann man diese Bootstrap-Klasse beispielsweise am <section> Tag eines Blocks anwenden. Hier habe ich die class="sticky-top" zu der bereits vorhandenen class="header6" hinzugefügt:

<section data-bs-version="5.1" class="header6 sticky-top" group="Headers">


Weiterhin habe ich noch dem Block einen z-index: 0; gegeben, damit die folgenden Blöcke auch über diesen Header Block hinweg scrollen können. Bitte denkt daran, dass der Schalter "Parallax" in den Block-Werkzeugen deaktiviert sein muss und dass der Effekt erst nach der lokalen oder entfernten Veröffentlichung sichtbar wird.

Erfolgreich getestet in allen gängigen Browsern sowie auf Android- und iOS-Geräten.

Weitere Möglichkeiten zeige ich hier mit fixierten Blöcken oder auch mit dem Script "Backstretch".

Sticky Top Beispiel

Positioniert ein Element am oberen Rand des Viewports, von Kante zu Kante, aber nur, nachdem darüber hinweg gescrollt wurde. Es gibt auch responsive Klassen. In diesem Block sticky-lg-top, das erst ab einem Display ≥ 992px wirkt, da sonst der Inhalt am mobilen Gerät nicht vollständig lesbar wäre. Natürlich kann man jeden Block mit dieser Klasse versehen. Je nachdem, welchen z-index man dem Block zuweist, wird dieser entweder oben fixiert oder vom restlichen Inhalt beim Scrollen überlagert.

Die Malediven sind ein tropisches Paradies im Indischen Ozean, bestehend aus etwa 1.190 Koralleninseln, die in 26 Atollen gruppiert sind. Bekannt für ihre atemberaubenden Strände mit feinem, weißen Sand und kristallklarem Wasser, ziehen die Malediven jährlich zahlreiche Touristen an, die Ruhe und Erholung suchen. Die Inseln bieten eine reiche marine Biodiversität, die ideal für Schnorcheln und Tauchen ist. Die Hauptstadt Malé ist ein lebhaftes Zentrum mit einem interessanten kulturellen Erbe. Die Malediven sind auch für ihre luxuriösen Resorts bekannt, die oft auf eigenen Inseln liegen und exklusive Dienstleistungen anbieten. Die beste Reisezeit ist von November bis April, wenn das Wetter trocken und sonnig ist.

Slider mit Sticky-Top

Malediven

Die Malediven sind ein tropisches Paradies im Indischen Ozean, bestehend aus etwa 1.190 Koralleninseln, die in 26 Atollen gruppiert sind. Bekannt für ihre atemberaubenden Strände mit feinem, weißen Sand und kristallklarem Wasser, ziehen die Malediven jährlich zahlreiche Touristen an, die Ruhe und Erholung suchen. Die Inseln bieten eine reiche marine Biodiversität, die ideal für Schnorcheln und Tauchen ist.

Land und Leute

Die Bevölkerung der Malediven, die etwa 540.000 Menschen umfasst, ist ethnisch vielfältig, wobei die Mehrheit aus Maledivern besteht, die eine Mischung aus arabischen, indischen und afrikanischen Einflüssen repräsentieren. Die Amtssprache ist Dhivehi, eine Sprache, die zur indo-arischen Sprachfamilie gehört. Die Kultur der Malediven ist stark von der islamischen Tradition geprägt, was sich in den Bräuchen, Festen und der Architektur des Landes widerspiegelt.

Die Malediven sind ein tropisches Paradies im Indischen Ozean.



Sticky Top Beispiel nur im Text

In diesem Beispiel habe ich lediglich dem Textbereich dieses Blocks die Klasse "sticky-top" zugewiesen, sodass der Text weiterhin sichtbar bleibt, während der Bereich mit dem Bild am Desktop scrollt.

Code Editor

Sticky-Top HTML im Code Editor

© Copyright Mobirise-Tutorials.com

Datenschutz und Impressum

Google Translator
Funktionale Cookies akzeptieren