AW: Navigation soll sich auch beim Scrollen ändern
Der FF 3 auf Linux unterstützt noch kein HTML5, deshalb sehe ich beispielsweise deine Navigation nicht. Aktuellere Browser sollten das können, aber trotzdem schließt ungewollt du eine Teilmenge an potentiellen Kunden aus - insbesondere weil du keine echten HTML5-Funktionen nutzt, soweit ich das sehen kann.
Ansonsten habe ich mal aus Eigeninteresse dein Problem gelöst, wenn auch sehr schmutzig.
Bei Remy Sharp habe ich
ein Mini-Plugin für das Erkennen von sichtbaren Elementen per jQuery gefunden. Das Ding ist von 2009, wahrscheinlich gibt es modernere Alternativen, aber seine Lösung funktioniert. Ich habe es noch etwas angepasst, damit die Navi sich erst ändert wenn das Element ca. 1/3 im Bildschirm ist.
Lade dir von seiner Seite die jquery.inview.js runter und wirf sie in dein js/-Verzeichnis. Optional kannst du jetzt noch die Zeile 40 darin
Code:
if (scrolltop > (top + height) || scrolltop + vpH < top) {
in folgende ändern
Code:
if (scrolltop > (top + height) || scrolltop + vpH -vpH/3 < top) {
Danach musst du jeder "Unterseite" die Klasse inview geben, also bspw.
HTML:
<div id="page-portfolio" class="inview">
Das machst du für page-home, -portfolio, -aboutme und -kontakt.
Jetzt noch das Herzstück einbauen:
HTML:
<script defer src="js/jquery.inview.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8">
$(document).ready(function() {
$('div.inview').bind('inview', function (event, visible) {
var ueberwachteElemente = $('div.inview');
ueberwachteElemente.each(function() {
vis = $(this).data('inview') || false;
if(vis) {
activeId = $(this).attr("id");
activeMenuItem = $('nav a[href$="'+activeId+'"]');
}
});
activeMenuItem.parents('li').siblings('li:has(.active)').find('a').removeClass('active').end().end().end().addClass('active');
});
});
</script>
Das bindet zuerst das Plugin von Remy ein, dann kommt die jQuery-Logik: er bindet an die div-Elemente mit der Klasse "inview" einen eigenen Event, der immer abgefeuert wird wenn eines der überwachten Elemente (un)sichtbar wird. Immer dann wird geprüft, welches jetzt sichtbar ist und das letzte davon wird in der Navigation als aktiv gekennzeichnet.
Das funktioniert prima in meinen Tests hier lokal.
Abgesehen empfehle ich dir, die Adresse kerstinlohner.de zu registrieren, das ist doch um einiges professioneller als pixinchen.de auf der Visitenkarte
Edit: ich sehe, die Variante kerstin-lohner.de ist es schon, habe ich übersehen.
Duddle
