Docked Navigation
Aus Contao Community Documentation
Inhaltsverzeichnis
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.
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:
.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'); } //ist die Navigation wieder sichtbar, negieren man das ganze wieder 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 } }); })
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)
