Hi Leute,
ich habe vor lägerer Zeit mal eine Seite mit einer sticky Navigation gemacht:
http://www.fotografeninnung-stuttgart.de/
Leider bin ich damals mit dem o.g. Problem nicht weiter gekommen.
Jetzt erstelle ich gerade eine neue Seite, bei der auch eine sticky Navigation gefordert wird. Was soll ich machen? Soll ich die "alte" Lösung wieder verwenden und das Ruckeln in Kauf nehmen oder gibt es inzwischen elegantere Lösungen (vielleicht reines CSS), die nicht rucklen?
Hier der Code für die alte Lösung (moo_navigationDock.html5 als template):
Code:<?php // StyleSheet dem <head> hinzufügen $GLOBALS['TL_CSS'][] = 'files/CSS/stickyHeader.css||static'; ?> <script> (function($) { window.addEvent('domready', function() { // Navigation zwischenspeichern var nav = $('nav-main'); // Position zwischenspeichern var navPosition = nav.getPosition(); // Status ob Position erreicht ist var isEntered = false; // Element für Logo erstellen // und am Anfang des ersten a Tags einbinden //var navLogo = new Element('span.nav-logo') // .inject(nav.getElement('ul a.first'), 'top'); // Scroll Event an das window anhängen window.addEvent('scroll', function(event) { // Prüfen ob die Navigation schon erreicht wurde und ob isEntered true ist if(this.getScroll().y >= navPosition.y && !isEntered) { nav.addClass('sticky'); // navLogo.tween('margin-left', -10); // Einblenden des Logos mit Effekt isEntered++; // Prüfen ob der Navigationsbereich seine ursprungsposition einnehmen kann. } else if(this.getScroll().y < navPosition.y && isEntered) { nav.removeClass('sticky'); // navLogo.setStyle('margin-left', -59); // Ausblenden des Logos ohne Effekt isEntered--; } }); }) })(document.id) </script>
Hier das CSS dazu:
Ich habe dazu im Forum gesucht, bin aber immer wieder auf Links zu einer Seite gestoßen, die es inzwischen nicht mehr gibt!Code:#nav-main.sticky { /* Resets */ border-radius: 0 ; margin-top: 0px; /* Fixed Basics */ position: fixed; z-index: 10; top: 0; /* Zentrieren */ width: 100%; /*left: 50%;*/ /* margin-left: -470px;*/ margin: 0 auto; } .nav-logo { background: url('../Logos/foto_aktuell-300x50.gif') no-repeat 0px 0px; width: 300px; height: 50px; display: block; float: left; margin-left: -59px; margin-right: 5px; } @media(min-width:768px) and (max-width:979px) { #nav-main.sticky { /*margin-left: -360px;*/ margin: 0 auto; } }
Grüße aus Ludwigsburg
Jochen Kubik
Lesezeichen