Docked Navigation - Versionsgeschichte

Stefanmelz am 30. September 2012 um 12:12 Uhr

2012-09-30T12:12:06Z

BugBuster: /* Aufbau des HTML */

2012-09-17T20:27:47Z

‎Aufbau des HTML

Stefanmelz am 11. September 2012 um 10:45 Uhr

2012-09-11T10:45:27Z

Andreasisaak am 11. September 2012 um 10:42 Uhr

2012-09-11T10:42:01Z

Stefanmelz am 10. September 2012 um 21:22 Uhr

2012-09-10T21:22:43Z

Stefanmelz am 10. September 2012 um 21:22 Uhr

2012-09-10T21:22:18Z

Stefanmelz am 10. September 2012 um 21:21 Uhr

2012-09-10T21:21:28Z

Stefanmelz am 10. September 2012 um 21:15 Uhr

2012-09-10T21:15:56Z

Stefanmelz: Die Seite wurde neu angelegt: „Category: Sonstiges = docked Navigation = == Einleitung == In diesem Tutorial möchte ich beschreiben, wie man eine Navigation einrichtet, welche beim scro…“

2012-09-10T21:13:55Z

Die Seite wurde neu angelegt: „Category: Sonstiges = docked Navigation = == Einleitung == In diesem Tutorial möchte ich beschreiben, wie man eine Navigation einrichtet, welche beim scro…“

Neue Seite

[[Category: Sonstiges]]

= 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.[http://www.stefanmelz.de 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.

<source lang="html4strict">
<body>
<div id="navi"></div>
<div id=“dienste“></div>
<div id=“arbeiten“></div>
<div id=“profil“></div>
</body>
</source>
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“.
<source lang="html4strict">
<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>
</source>

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:
<source lang="css">
position:fixed;
top:0;
</source>

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:

<source lang="css">
width:100%;
</source>

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

<source lang="css">
.scrolled {
position:fixed;
top:0;
width:100%;
}
</source>

=== 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:

<source lang="javascript">

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');
}

})

})
</source>

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.

@@ Zeile 104: / Zeile 104: @@
+		}
-	})
+	});
          //damit bei einem klick auf einen Navigationslink sanft gescrollt wird

← Nächstältere Version		Version vom 10. September 2012, 21:22 Uhr
Zeile 115:		Zeile 115:
	x: 0,		x: 0,
	y: -navicoords.height		y: -navicoords.height
−	}	+	}
		+	});

← Nächstältere Version		Version vom 10. September 2012, 21:21 Uhr
Zeile 105:		Zeile 105:

	})		})
		+
		+	//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
		+	}
		+

	})		})

← Nächstältere Version		Version vom 10. September 2012, 21:15 Uhr
Zeile 111:		Zeile 111:

	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.		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.
		+
		+
		+
		+
		+	--[[Benutzer:Stefanmelz\|Stefanmelz]] 23:15, 10. Sep. 2012 (CEST)

@@ Zeile 60: / Zeile 60: @@
 <source lang="css">
-.scrolled {
+#navi.scrolled {
 	position:fixed;
 	top:0;
@@ Zeile 120: / Zeile 120: @@
 </source>
 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.

@@ Zeile 17: / Zeile 17: @@
 <body>
        <div id="navi"></div>
-       <div id=“dienste“></div>
+       <div id="dienste"></div>
-       <div id=“arbeiten“></div>
+       <div id="arbeiten"></div>
-       <div id=“profil“></div>
+       <div id="profil"></div>
 </body>
 </source>
 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 ==

@@ Zeile 86: / Zeile 86: @@
 	//nun soll alles weitere passieren, sobald man scrolled, also ein neues Event hinzufügen
-	window.addEvent('scroll',function(){
+        window.addEvent('scroll',function(){
-−
-		//den aktuellen Scrollstatus fragt man hiermit ab
+        //den aktuellen Scrollstatus fragt man hiermit ab
-		var scroll = this.getScroll();
+        var scroll = this.getScroll();
-−
-		//jetzt der abgleich fensterposition mit navigationsposition
+        //jetzt der abgleich fensterposition mit navigationsposition
-		if((scroll.y) > navicoords.top)
+        if(scroll.y >  navicoords.top)
-−
+        {
-			//und nun der Navigation die Klasse scrolled geben
+            //und nun der Navigation die Klasse scrolled geben
-			 navi.addClass('scrolled');
+            navi.addClass('scrolled');
+        }else
-		//ist die Navigation wieder sichtbar, negieren man das ganze wieder
-		else
+            //die klasse scrolled wieder entfernen
+            navi.removeClass('scrolled');
-			//die klasse scrolled wieder entfernen
+        };
-			navi.removeClass('scrolled');
+    });
          //damit bei einem klick auf einen Navigationslink sanft gescrollt wird