nicht angemeldet
Fixe Navi-Leiste beim Scrollen verändern
Hallöle,
habe mehrere SEHR umfangreiche HTML- Seiten Dokumentation.
Mit der fixierten Navi- Leiste kann man innerhalb einer Seite die Kapitel anspringen, aber beim anschliessenden weiterscrollen verliert man die Orientierung. In welchem Kapitel bin ich jetzt eigentlich?
Gibt es eine Möglichkeit, abhängig von der gescrollten Position das zuständige Kapitel in der Navi-Leiste farblich abzuheben, das gerade den Bildschirm füllt?
Oder eine andere Idee?
Liebn Gruß, Kalle
-
Hi,
Gibt es eine Möglichkeit, abhängig von der gescrollten Position das zuständige Kapitel in der Navi-Leiste farblich abzuheben, das gerade den Bildschirm füllt?
Du koenntest mit Javascript die Differenz zwischen offsetTop (z.B des Kapitel-H-Tags) und Scrollposition abfragen (document.getElementById(el).offsetTop und document.documentElement.scrollTop), und in Abhaengigkeit vom offset des naechsten Kapitesl Deine Anzeige machen.
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hi,
Du koenntest mit Javascript die Differenz zwischen offsetTop (z.B des Kapitel-H-Tags) und Scrollposition abfragen (document.getElementById(el).offsetTop und document.documentElement.scrollTop), und in Abhaengigkeit vom offset des naechsten Kapitesl Deine Anzeige machen.
Klappt nicht, scrollTop ist IMMER 0, offsetTop hat einen durch Scrollen nicht änderbaren Wert, nur durch Änderung der Fensterbreite.
Kann es daran liegen, dass die Seite nicht insgesamt gescrollt wird, sondern nur der Text? Navi-Leisten links (Projekt) und oben (Kapitel dieser Seite) sind fix.
So sieht es aus:
...
<h2 id='_sandra''>Sandra</h2>
...
</body><script language='JavaScript' type='text/javascript'>
<!--
var zeit = 0;
function zeigPosi() {
zeit++; // Kontrolle, ob Programm laeuft
document.getElementById('xx').innerHTML = zeit + '/' + document.getElementById('_sandra').scrollTop + '/' + document.getElementById('_sandra').offsetTop;
window.setTimeout( 'zeigPosi()', 1000 );
}
zeigPosi();
// -->
</script>
</html>Lieben Gruß, Kalle
-
Hi,
Klappt nicht, scrollTop ist IMMER 0
nein, Du machst was falsch. Anbei ein simplifiziertes Schema, klicke jeweils auf "doit". Beachte, die Ansprache ist abhaengig vom Modus in dem der Browser laeuft - Standard: documentElement, Quirks: body.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head><script language="javascript1.2" type="text/javascript">
function doit(el){
alert(document.getElementById(el).offsetTop - document.documentElement.scrollTop);
}</script>
</head>
<body>
<p onclick="doit('k1')">doit</p>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
<p onclick="doit('k1')">doit</p>
test<br>
test<br>
<h1 id="k1">k1</h1>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
<p onclick="doit('k1')">doit</p>
test<br>
test<br>
test<br>
test<br>
test<br>
test<br>
</body>
</html>Gruesse, Joachim
--
Am Ende wird alles gut.-
Hi, Joachim,
dein Beispiel funktioniert, danke dafür.
Muss mal schauen, was an meiner Seite falsch ist. Wenn ich's habe, berichte ich kurz.
LG Kalle
-
Hi, Joachim,
dies war dein Vorschlag:
document.documentElement.scrollTop)und ich habe daraus gemacht:
document.getElementById('sandra_').scrollTopAHA, das Scrollen kann man also nicht auf ein bestimmtes Element beziehen, sondern auf "documentElement".
Ja, jetzt klappt es.
LG Kalle
-
-
-
-