Wer etwas auf meiner Seite surft, hat es sicher schon bemerkt. Die Navigation links bleibt “kleben”, das heißt sie scrollt ganz in guter alter Frameset-Manier mit. Dadurch muss der Nutzer nicht erst wieder nach oben scrollen, um die Seite zu wechseln. Im Quelltext müssen dafür eigentlich gar keine Veränderungen stattfinden, einzig das CSS und für kleinere Bildschirme ein kleines JavaScript erzeugen diesen Effekt.

Der HTML-Quelltext

Wir haben ungefähr folgendes Markup:

        ...

        ...

Unsere Seite ist also erst einmal grob in 2 Teile unterteilt: #sidebar und #main. Kritisch ist für uns eigentlich nur die Sidebar, sie soll am Ende oben links in der Ecke kleben bleiben.
Dazu nun das generelle CSS.

Das CSS

* { border:0; margin: 0; padding: 0;}

#site {
	width:980px;
}

#sidebar {
	width:260px;
	float:left;
	position: fixed;
}

#main {
	width:720px;
	float:right;
}

Am Anfang habe ich einen generellen Reset durchgeführt. Ihr müsst natürlich nicht alle Elemente ansprechen, aber das ist nur meine übliche Vorgehensweise. Wichtig ist auf jeden Fall, dass die Elemente auch wirklich ganz am Rand der Seite stehen, also dass der body-Tag kein padding besitzt. Der Rest ist eigentlich nur ein normales 2-Spalten Layout mit einer Gesambreite von 980 Pixeln. Dieses könnt ihr natürlich variieren, die #sidebar muss nicht so breit sein. Die wichtige Eigenschaft ist in diesem Fall position:fixed für die #sidebar, dadurch klebt die ganze Leiste links oben fest. Durch das float:right für #main wandert dieser Container immer an den rechten Rand. Dieses ist wichtg, da sich beide Elemente sonst überlagern würden. Außerdem benötigen wir diese Eigenschaft noch für den kleinen Workaround für kleinere Browserfenster.

Nun denkt ihr euch sicher: Ist doch alles super, wozu noch JavaScript? Dann macht euer Fenster mal etwas kleiner…

Bei einer Fenstergöße kleiner als 980px wird die #sidebar in den #main Bereich hineinragen, außerdem werdet ihr, wenn das Fenster niedriger ist als die #sidebar, nie die komplette #sidebar zu sehen bekommen, da sie ja nicht mitscrollt! Doch das ist alles halb so schlimm, denn wir können mittels JavaScript unsere #sidebar einfach vom Kleber befreien…

Das JavaScript

Zuerst einmal benötigt ihr für den folgenen Code das jQuery Framework. Das gibt es hier.

$(document).ready(function() {

    function fixedNav() {
        var winHeight = $(window).height();
        var winWidth = $(window).width();
        var barHeight = $("#sidebar").height();
        var browserIE6 = (navigator.userAgent.indexOf("MSIE 6")>=0) ? true : false;

        if (browserIE6) { //if IE6...
            $("#sidebar").css({'position' : 'absolute'});
        } else { //if not IE6...
            $("#sidebar").css({'position' : 'fixed'});
        }

        if (980 > winWidth || barHeight > winHeight) {
            $("#sidebar").css({'position' : 'static'});
        }
    }

    fixedNav(); 

    $(window).resize(function () {
        fixedNav();
    });

});

Wir definieren uns eine Methode fixedNav() in der wir checken, ob das Browserfenster ausreichend groß ist, um die Navigation anzukleben. Falls nicht, bekommt #sidebar eben die Eigenschaft position:static. Der IE6 kennt weder fixed noch static, also bekommt er position:absolute für #sidebar. Dann klebts im IE6 halt generell nicht, aber wer mit so einem Browser surft, hat diesen Komfort auch nicht verdient…

Die Funktion wird einmal beim Seitenaufruf und bei jeder Fenstergrößenveränderung $(window).resize() aufgerufen.

Das wars!

P.S.: Das clearen nicht vergessen. Den Hintergrund bei meiner Navigation habe ich übrigens in den body gelegt, damit er immer 100% hoch ist.

Verknüpft.

• Das Gleiche so ähnlich in Englisch...

Sozial vernetzt.