Sticky Navigation - Inhalt ruckelt
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:
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;
}
}
Ich habe dazu im Forum gesucht, bin aber immer wieder auf Links zu einer Seite gestoßen, die es inzwischen nicht mehr gibt!
Grüße aus Ludwigsburg
Jochen Kubik
