Header scrollbar / fixiert am oberen Fensterrand
Nachdem ich bereits zwei Varianten vorgestellt habe, bei denen Header und Footer fest stehen und sich nur am Contentbereich ein Rollbalken befindet bzw. sich der Rollbalken über das gesamte Browserfenster erstreckt, möchte ich heute eine weitere Variante vorstellen. Dabei scrollt der Header bis an den oberen Bildrand und die integrierte Navigation bleibt dort im sichtbaren Bereich fixiert stehen.
Im Gegensatz zu den bereits vorgestellten Versionen ist hier Javascript zwingend notwendig. Das Beispiel ist mit HTML5 realisiert und unterstützt ältere Browser bis einschließlich IE6. Die Webseite kann ebenso mit HTML4 realisiert werden, d.h. mit <div> anstelle von <header> etc. Wichtig ist allerdings, dass Sie einen validen DOCTYPE wählen, damit die Webseiten im Standard-Mode und nicht im Quircks-Mode laufen.
Grundgerüst für die Webseite
Die folgenden CSS-Angaben sind für ein browserübergreifendes Grundgerüst notwendig. Die Definition der HTML5-Elemente als Blockelement ist notwendig, um ältere Browser, die erst HTML5-tauglich gemacht werden müssen, in eine definierte Ausgangslage zu versetzen.
height:100%;
margin:0;
padding:0;
}
header, nav, section {display: block;}
header {
top:0px;
position:relative;
height:10em;
width:100%;
z-index:10;
}
#Content {
top:0;
position:relative;
}
Spezielle Angaben für die Navigation
Hier folgen die wesentlichen Angaben, um das Scroll-Verhalten der Navigation dahingehend zu beeinflussen, dass sie bis an den oberen Rand des Browserfensters mit scrollt und danach im oberen Bereich sichtbar stehen bleibt. Es werden für beide Fälle jeweils Stylesheets definiert. Diese beinhalten die Standardangaben für das <nav>-Element und in einer zusätzlichen CSS-Klasse Angaben für den Fall, dass die Navigation am oberen Rand des Browserfenster fixiert ist.
bottom:0px;
height:3em;
left:0px;
position:absolute;
width:100%;
}
* html nav {
top:expression(auto);
}
.fixed-navi {
top:0px;
position:fixed !important;
position:absolute;
}
* html .fixed-navi {
top:expression(documentElement.scrollTop);
}
Das Prinzip ist relativ einfach. Sie prüfen per Javascript die Position der Navigationsleiste. Ist der obere Bildschirmrand erreicht, so wird einfach die zusätzliche CSS-Klasse „fixed-navi“ dem <nav>-Element zugeordnet. Beim Scrollen in die Gegenrichtung erfolgt das Entfernen der Klasse „fixed-navi“ auf die gleiche Art und Weise.
Javascript, für scroll / fixed Header
Die Minimalversion des Javascriptes ist hier aufgelistet. Im onLoad-Event wird die Webseite nach oben gescrollt und die Startposition des Navigation registriert. Bei Veränderung der Fenstergröße wird dieser Wert aktualisiert, damit er z.B. bei responsive Webseiten jeweils mit dem korrekten Inhalt gefüllt ist. Beim Scrollen (onScroll-Event) wird anhand der aktuellen Position der Navigation, die CSS-Klasse „fixed-navi“ gesetzt bzw. entfernt. Um die gängigsten Browser (auch abwärtskompatibel) abzudecken, ist noch ein wenig Zusatzaufwand nötig (Ergänzung der trim-Function, falls noch nicht unterstützt; browserabhängige Ermittlung der topPos).
var startPos;
if(typeof String.prototype.trim !== 'function') {
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g, '');
}
}
window.onload=function(){
window.scrollTo(0,0);
startPos = document.getElementsByTagName("nav")[0].offsetTop;
};
window.onresize=function(){
window.scrollTo(0,0);
startPos = document.getElementsByTagName("nav")[0].offsetTop;
};
window.onscroll = function () {
elem = document.getElementsByTagName("nav")[0];
var myFixedClass='fixed-navi';
var body=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body;
var topPos=document.all? body.scrollTop : pageYOffset;
if (topPos > startPos) {
if (elem.className.indexOf(myFixedClass)== -1) {
if (elem.className != '') elem.className = elem.className + ' ' + myFixedClass;
else elem.className = myFixedClass;
}
} else {
var sRegEx = new RegExp(myFixedClass, "g");
elem.className = elem.className.replace(sRegEx,"").trim();
}
}
</script>
Falls Sie bereits jQuery auf Ihrer Webseite einsetzen, können Sie diese Funktionalität auch mit jQuery realisieren. Dann sieht der Code deutlich übersichtlicher aus und um die Abwärtskompatibilität müssen Sie sich auch nicht kümmern. Nachteil ist natürlich, dass für das jQuery-Framework ein zusätzlicher Request notwendig ist, der natürlich zu Lasten der Performance geht und das Ladevolumen der Webseite erhöht. Deshalb würde ich für dieses Feature nur auf die jQuery-Variante zurückgreifen, wenn jQuery sowieso schon für andere Features auf der Webseite verwendet wird.
var startPos;
$(document).ready(function(){
window.scrollTo(0,0);
startPos = $("nav").offset().top;
});
$(document).resize(function(){
window.scrollTo(0,0);
startPos = $("nav").offset().top;
});
$(window).scroll(function(){
if ($(document).scrollTop()>startPos) {
$( "nav" ).addClass('fixed-navi');
} else {
if ($( "nav" ).hasClass( 'fixed-navi' )){
$( "nav" ).removeClass('fixed-navi');
}
}
});
</script>
Praxisbeispiel des scroll / fixed Headers
Im Ergebnis reagiert die Webseite wie folgt: