Bootstrap 3: Probleme mit einer Sticky/Affix-Navbar

Für die Neugestaltung eines Webprojekts, bei welchem aus Prokrastinationsgründen noch das mittlerweile veraltete Bootstrap 3 zum Einsatz kommt, wollte ich eine sogenannte „Sticky-Navbar“ verwenden. (Achtung: Falls man schon Bootstrap 4 verwendet ist die Syntax vermutlich anders als in den gezeigten Codebeispielen.)

Im Prinzip ist dies eine „Fixed“-Navbar, also eine fest positionierte Navbar, die oben über dem Seiteninhalt bleibt. Hinzu kommt bei der „Sticky“-Navbar im Normalfall noch ein Bereich über der Navbar, indem ich in diesem Fall die Links für das Pflichtprogramm bzgl. Datenschutz etc. anzeigen lasse, der beim Scrollen dann ausgeblendet wird. Hier kann man z. B. auch ein großes Bild oder dergleichen anzeigen lassen, unterhalb dem sich die Navbar dann anfangs befindet. Beim Scrollen bleibt die Navbar dann am oberen Rand des Browserfensters „kleben“ und die ganze Zeit über dem Content, sodass der Seitenbesucher nicht hochscrollen muss, um wieder an die relevanten Links zu gelangen.

Leider kam es zu unschönen Effekten beim Versuch die Sticky-Navbar mit Bootstrap-Bordmitteln umzusetzen. Was genau ich damit meine und wie ich es mit etwas eigenem Code gelöst habe, zeige ich in diesem Artikel.

 

Um die Unterscheide zwischen den Navbar-Typen deutlich zu machen, sind hier ein paar Bootstrap-Beispiele zu den verschiedenen Navbar-Typen:

 

Default-Navbar:

Die Default-Navbar ist so breit wie der Content-Bereich und im Normalfall auch vom Browserrand abgegerenzt und verschwindet wie der normale Seiteninhalt beim Scrollen.

https://getbootstrap.com/docs/3.4/examples/navbar/

 

Static-Top-Navbar:

Die Static-Top-Navbar ist vom Content abgehoben und befindet sich im Normalfall in kompletter Browserbreite direkt oben unter dem Rand des Browserfensters ohne Freiraum. Beim Scrollen der Seite verschwindet diese allerdings dann.

https://getbootstrap.com/docs/3.4/examples/navbar-static-top/

 

Fixed-Top-Navbar:

Wie eingangs beschrieben ist die Fixed-Top-Navbar gleich plaziert wie die Static-Top-Navbar. Mit dem Unterschied, dass diese absolut positioniert ist und ihre Höhe nicht zur gesamten Seitenhöhe (zum Body-Bereich) zählt. Diese befindet sich also immer oben „über“ dem Content. Die Fixed-Navbar hat also vor allen Dingen ein Problem: Ohne Padding oder Margin beim Content-Div bzw. einem Wrapper-Div oder beim Body würde also der Content-Bereich von dieser sofort überdeckt werden. Je nach Auflösung sieht das dann recht bescheiden aus und man hat zu viel oder zu wenig Freiraum zwischen Navbar und dem Rest der Seite.

https://getbootstrap.com/docs/4.0/examples/navbar-top-fixed/

 

Sticky- bzw Affix-Navbar:

Die Sticky- oder auch Affix-Navbar (sticky = klebend, affix = anheften) ist, wie bereits geschrieben, ebenfalls gleich positioniert wie die Fixed- bzw. Static-Top-Navbar. Allerdings wird diese beim Scrollen erst fest direkt am Browserfenster „festgeklebt“, da sich über dieser sich noch Content befindet, der dann beim Scrollen verschwindet und nur die Navbar zurücklässt. Dieser Effekt sieht ganz cool aus, da man das Gefühl hat, die Navbar würde wirklich am Browserfenster hängen bleiben.

https://www.w3schools.com/bootstrap/bootstrap_affix.asp

 

Umsetzung meiner Sticky-Navbar:

Dies ist bei mir der Bereich, der beim Scrollen ausgeblendet wird. Ich habe diesen „Preheader“ genannt:

Meine Navbar beinhaltet noch ein paar Besonderheiten, wie Links die nur bei bestimmten Auflösungen angezeigt werden und Links die auf der rechten Seite angezeigt werden. Dies ist für das geschilderte Problem aber zweitrangig. Der Code der Navbar sieht aber ungefähr so aus:

 

Affix-Versuch laut Tutorials:

Die Beispiele, die ich zuerst fand, sahen zusätzliche CSS-Klassen vor, die mit Hilfe von JQuery beim Scrollen über ein bestimmtes Element oder eine bestimmte Seitenhöhe dann dem Header-Tag hinzugefügt werden und dessen Anzeige verändern:

Ebenfalls ist ein Padding für den folgenden Container vorgesehen um ein schnelles Springen des Seiteninhalts in dem Moment, in dem der Header fest positioniert wird, zu unterbinden. Dies passiert sonst, weil die Höhe des Headers dann ja nicht mehr zur gesamten Seitenhöhe gezählt wird.

Der zugehörige Javascript-Code lautete so:

Dieser JQuery-Code bewirkt, dass beim Scrollen über den Header-Bereich hinaus die zuvor definierte CSS-Klasse dem Header-Tag hinzugefügt wird, wodurch dann die Regeln zur Anwendung kommen.

Problematik:

Dieser Code funktioniert gut. Es gab da nur ein Problem, da mein Bereich über der Header-Navigation sehr niedrig ist und die Seite auch einen Footer hat, gab es einen leichten Konflikt bei Seiten die nicht genügend Inhalt haben und man nicht besonders viel Scrollen kann. Dort passiert folgendes:

Man scrollt und der JQuery-Code wird ausgeführt. Dadurch wird die Seitenhöhe kurzzeitig um die Höhe der Header-Navigation vermindert. Nun ist die Seite insgesamt nicht mehr höher als das Browserfenster und kann somit komplett angezeigt werden. Da man sich also wieder ganz oben befindet, wird der Header und der Preheader aber nun wieder angezeigt und dessen Höhe wieder zur gesamten Seitenhöhe gezählt. Es entsteht ein Flacker-Effekt und man ist in einem „Loop“ gefangen, der es einem unmöglich macht bis an das Seitenende zu gelangen. Das ist eher unschön und lässt sich auch mit dieser Methode meiner Meinung nach nicht unterbinden.

 

Eigener Versuch:

In einem ersten eigenen Versuch, habe ich per Javascript einfach statt dieser „affix“-Klasse die normale „navbar-fixed-top“-Klasse verwendet und zusätzlich den Preheader ausgeblendet. Das Ausblenden des Preheaders war eigentich gar nicht mehr nötig, aber auch dieser Ansatz führt zum gleichen Ergebnis und die Seite „flackert“ wie bereits geschildert:

 

Stattdessen habe ich dann die Navbar von einer „static-top“-in eine „fixed-top“-Navbar abgeändert, sodass diese sich grundsätzlich über dem Seiteninhalt befindet, welchem ich ein festes Padding verpasst habe. Da dadurch der Preheader von der Navbar überdeckt wurde, habe ich als einzige Lösung gesehen, diesen mit in den Header-Tag zu integrieren. Deshalb sieht der Code für den Header-Bereich nun so aus:

 

Per JQuery blende ich nun lediglich den Preheader-Tag innerhalb des Header-Bereichs beim Scrollen aus:

Ich habe die Logik also mehr oder weniger umgedreht und habe keine Probleme mehr mit der Seitenhöhe. Denn der Versatz durch das Wegfallen des kleinen Preheader-Bereichs macht nun nichts aus, weil seine Höhe sowieso wegen der absolut positionierten „fixed-top“-Navbar von Anfang an nicht zur Gesamthöhe der Seite zählt. Dadurch wird dieser Loop-Effekt umgangen.

 

Fazit

So richtig zufrieden bin ich mit dieser Lösung und dem Code nicht, denn irgendwie sieht das nicht wirklich „rund“ aus. Aber wenn ich mir das ganze Gefrickel um so eine Sticky-Navbar (ohne Bootstrap) hinzubekommen auf der w3schools-Seite im Quellcode angucke, dann ist mein Code schon gar nicht mehr so ein Haufen Schrott. Denn dort ist die Sticky-Navbar anscheinend auch irgendeine selbst zusammen gefrickelte Geschichte und CSS-Anweisungen nutzen die sogar auch überall direkt im HTML-Code 😀

 

Schreibe einen Kommentar