Contao Community Documentation - Benutzerbeiträge [de]

Docked Navigation

2012-09-30T12:12:06Z

Stefanmelz:

[[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">
#navi.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');
}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
}
});

})
</source>

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.

<source lang="javascript">
dienste.set('style','margin-top:'+navicoords.height+'px');
</source>

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

<source lang="javascript">
dienste.set('style','margin-top:0');
</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.

--[[Benutzer:Stefanmelz|Stefanmelz]] 23:15, 10. Sep. 2012 (CEST)

Docked Navigation

2012-09-11T10:45:27Z

Stefanmelz:

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

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

--[[Benutzer:Stefanmelz|Stefanmelz]] 23:15, 10. Sep. 2012 (CEST)

Docked Navigation

2012-09-10T21:22:43Z

Stefanmelz:

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

});

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

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

--[[Benutzer:Stefanmelz|Stefanmelz]] 23:15, 10. Sep. 2012 (CEST)

Docked Navigation

2012-09-10T21:22:18Z

Stefanmelz:

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

})

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

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

--[[Benutzer:Stefanmelz|Stefanmelz]] 23:15, 10. Sep. 2012 (CEST)

Docked Navigation

2012-09-10T21:21:28Z

Stefanmelz:

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

})

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

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

--[[Benutzer:Stefanmelz|Stefanmelz]] 23:15, 10. Sep. 2012 (CEST)

Docked Navigation

2012-09-10T21:15:56Z

Stefanmelz:

[[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.

--[[Benutzer:Stefanmelz|Stefanmelz]] 23:15, 10. Sep. 2012 (CEST)

Docked Navigation

2012-09-10T21:13:55Z

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…“

[[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.