Docked Navigation

Aus Contao Community Documentation


docked Navigation

Einleitung

In diesem Tutorial möchte ich beschreiben, wie man eine Navigation einrichtet, welche beim scrollen ab einem gewissen Punkt an der oberen Kante des Fensters andockt. bsp.stefanmelz.de


Aufbau des HTML

Das ist eigentlich recht simpel. Man benötigt zu allererst das Grundgerüst. Einmal angenommen, man hat auf der Seite 3 Bereiche, welche man ansteuern möchte.

<body>
      <div id="navi"></div>
      <div id="dienste"></div>
      <div id="arbeiten"></div>
      <div id="profil"></div>
</body>

Das ganze kann noch verpackt sein und weitere Elemente davor und dahinter enthalten, das ist irrelevant. Wichtig ist, dass die Navigation und die anszusprechenden Bereiche eine eindeutige ID oder Klasse haben.

Die Navigation

Eine Standard Navigation ist eine einfache unsortierte Liste. Da man auf der Seite bleiben soll, braucht man hier lediglich Anker. Das HTML kommt dann so in das div mit der ID „navi“.

<ul>
	<li class="dienste"><a href="#top">Dienstleistungen</a></li>
	<li class="arbeiten"><a href="#arbeiten">Arbeitsbeispiele</a></li>
	<li class="profil"><a href="#profil">Profil und Kontakt</a></li>
</ul>

Die Navigation funktioniert also ohne Javascript schonmal ganz gut und ist so nun einsetzbar.


Das Javascript / CSS

Nun möchte man nicht immer wieder nach oben scrollen um die Navigation benutzen zu können. Diese soll immer am oberen Fensterrand „kleben“ bleiben. Allerdings erst, wenn die Navigation aus dem sichtbaren Bereich verschwinden würde. Dazu benötigt man ein wenig Javascript und CSS.

CSS

Um die Navigation am oberen Fensterrand zu positionieren ist nichts weiter nötig als die CSS Angabe:

position:fixed;
top:0;

Der Rest ist stark davon abhängig wie die Navigation aussieht und wo die Seite platziert ist. Soll zum Beispiel die komplette Bildschirmbreite eingenommen werden, fügen wie hinzu:

width:100%;


Dieses CSS wird in die klasse „scrolled“ gepackt. Das sieht dann im Endeffekt so aus:

#navi.scrolled {
	position:fixed;
	top:0;
	width:100%;
}


JS

Nun soll die klasse „scrolled“ der Navigation zugewiesen werden, sobald diese aus dem sichtbaren Bereich verschwinden würde. Dazu muss die Position der Navigation ermittelt werden. Mootools hilft da mit der Methode getCoordinates(); Das ganze soll erst starten, wenn das DOM aufgebaut ist. Also in die eingebundene JS Datei folgendes schreiben:

window.addEvent('domready',function(){
 
	//das selektierte Element in eine Variable packen um schreibarbeit und performance zu sparen
	var navi = $('navi');
 
 
	//dann die Koordinaten der Navigation abfragen und in eine Variable packen
	var navicoords = navi.getCoordinates();
 
 
	//nun soll alles weitere passieren, sobald man scrolled, also ein neues Event hinzufügen
        window.addEvent('scroll',function(){
 
        //den aktuellen Scrollstatus fragt man hiermit ab
        var scroll = this.getScroll();
 
        //jetzt der abgleich fensterposition mit navigationsposition
        if(scroll.y >  navicoords.top)
        {
            //und nun der Navigation die Klasse scrolled geben
            navi.addClass('scrolled');
        }else
        {
            //die klasse scrolled wieder entfernen
            navi.removeClass('scrolled');
        };
 
    });
 
 
        //damit bei einem klick auf einen Navigationslink sanft gescrollt wird
        var mySmoothScroll = new Fx.SmoothScroll({
                links: 'a',
                wheelStops: false,
 
                // der offset muss so gross sein, wie die navi hoch ist, damit man beim smoothscroll nicht den eigentlichen Bereich mit der Navi ueberdeckt
                offset: {
                         x: 0,
                         y: -navicoords.height
                 }
         });
 
 
})

So sollte das schon funktionieren. Allerdings ergibt sich nun folgendes Problem: Sobald die navi die Klasse scrolled erhält und auf Position:fixed steht, wird sie aus dem normalen HTML Fluss gerissen. Das macht sich dann dadurch bemerkbar, dass der nachstehende Inhalt nach oben springt, und zwar soweit, wie die Navi vorher hoch war. Das beheben wir einfach, indem wir dem nächsten relativen Element einfach ein margin-top verpassen. In unserem Beispiel ist das das dienste div.

        dienste.set('style','margin-top:'+navicoords.height+'px');

Das kommt dann gleich hinter der Klassenvergabe. Und wenn man wieder in den Normalzustand springt, muss der Margin wieder weg.

        dienste.set('style','margin-top:0');

Das war die ganze Hexerei mit der Positionierung. Demnächst folgt dann darauf aufbauend die Beschreibung, wie man die Links in der Navigation auf aktiv schaltet, wenn man sich in dem jeweiligen Bereich befindet.



--Stefanmelz 23:15, 10. Sep. 2012 (CEST)

Ansichten
Meine Werkzeuge

Contao Community Documentation

Toflar hat mich gestern entjungfert! ... er hat meinen ersten PR gemerged.

Kim Wormer
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge