Scroll, Position Fixed, wert übergabe, nicht nach oben springen

[Thomas]

Hallo an alle helfenden Köpfe,

ich poste hiermit zum ersten Mal eine Nachricht und bin gespannt, wie gut die Klärung funktioniert.

Hier mein Problem:

die Seiten der Webseite um die es geht sind so angelegt, das in einem Bereich auf jeder Unterseite Informationen (kleine Bilder und Texte) gezeigt werden, daneben findet sich eine Auswahlnavigation für diesen Bereich, d.h. mit der Navigation wähle ich aus, was in dem Anzeigebereich gezeigt wird, soweit recht normal. Wenn ich jetzt viele Punkte zur Auswahl habe, muss ich weit nach unten scrollen und der Anzeigebereich verschwindet dann, klicke ich dann einen Menüpunkt an springt die Seite auf der dann ausgewählten Unterseite wieder nach oben und der Anzeigebereich ist sichtbar, aber zur erneuten Auswahl muss ich u.U. immer wieder runter scrollen.

Angestrebte Lösung: Anzeigebereich bleibt stehen mit position:fixed, die Navigation lässt sich scrollen, soweit kein Problem, nach Anklicken eines Menüpunktes soll aber die gescrollte Navigation auf der neuen Unterseite genau dort stehen wo sie vor anklicken stand und eben nicht nach oben gesprungen.

Wie mache ich das?

habe etwas entdeckt, das vielleicht in die Richtung geht: mit window.pageYOffset irgendwie die y Scrollposition feststellen, wie geht dies genau und wie geht es im IE? Dann diesen Wert speichern und an die angeklickte Seite übergeben und diese dann mit srollto an diese Stelle scrollen lassen, Anzeigebereich ist ja fixed. Die Übergabe könnte mit window.name gehen. Ist aber irgendwie alles viel zu kompliziert.

Geht das nicht viel viel einfacher, zumal ich gerade erst anfange javascript mir anzuschauen.

Danke schon mal.

[suit]

ich poste hiermit zum ersten Mal eine Nachricht und bin gespannt, wie gut die Klärung funktioniert.

vorweg: du verwendest einen vernünftige betreff und eine ordentliche fehlerbeschreibung ;) das ist löblich

Angestrebte Lösung: Anzeigebereich bleibt stehen mit position:fixed, die Navigation lässt sich scrollen, soweit kein Problem, nach Anklicken eines Menüpunktes soll aber die gescrollte Navigation auf der neuen Unterseite genau dort stehen wo sie vor anklicken stand und eben nicht nach oben gesprungen.

Wie mache ich das?

<http://de.selfhtml.org/css/layouts/fixbereiche.htm@title=den hier> schon gelesen?

mache dich am besten auch mit den nachteilen von position: fixed vertraut

der verlinkte artikel beschreibt ein fixes menü und scrollbaren inhalt - bei dir ists halt umgekehrt

[molily]

Geht das nicht viel viel einfacher, zumal ich gerade anfange javascript mir anzuschauen.

Nein, geht nicht einfacher.
Üblicherweise würde man für eine solche Aufgabe Frames verwenden, aber die haben wiederum ihre Nachteile. Dein Ansatz ist schon ganz richtig. Im Internet Explorer kannst du auf die Scrollposition über document.documentElement.scrollTop bzw. document.body.scrollTop zugreifen - je nach Rendermodus ist eines davon 0 und das andere enthält den gewünschten Wert.

Prinzipiell würde ich mir eher eine andere Informationsstruktur ausdenken, bei der du das Menü geordnet auf einem Bildschirm zeigen kannst, als dass es eine ewig lange Liste ist.

Mathias

[Thomas]

Geht das nicht viel viel einfacher, zumal ich gerade anfange javascript mir anzuschauen.

Nein, geht nicht einfacher.
Üblicherweise würde man für eine solche Aufgabe Frames verwenden, aber die haben wiederum ihre Nachteile. Dein Ansatz ist schon ganz richtig. Im Internet Explorer kannst du auf die Scrollposition über document.documentElement.scrollTop bzw. document.body.scrollTop zugreifen - je nach Rendermodus ist eines davon 0 und das andere enthält den gewünschten Wert.

Prinzipiell würde ich mir eher eine andere Informationsstruktur ausdenken, bei der du das Menü geordnet auf einem Bildschirm zeigen kannst, als dass es eine ewig lange Liste ist.

Mathias

Vielen Dank Mathias und Suit für die schnellen Antworten.

Ich schwanke im Moment, ob ich angesichts der dann doch noch zahlreichen offenen Fragen dieses doch detailhafte Problem angehen will. Schau mer mal, trotzdem Danke.

Warum verspringt eigentlich bei position:fixed der fixierte Bereich in allen Browsern bis auf IE um einige Pixel nachdem er fixiert wurde. Müsste ich per Browserweiche auch aufwändig korrigieren. Leider weiß ich nicht genau wie folgendes geht:

1. Browserweiche für IE ist mir klar mit conditional comments, aber wie geht eine Browserweiche für Safari, dort springt es nämlich noch mal anders als in allen anderen Browsern.

2. Wie geht das konkret mit document.documentElement.scrollTop bzw. document.body.scrollTop? gelesen hatte ich dies alles schon, aber die Umsetzung ist nicht 1 zu 1 beschrieben, irgendwann lässt sich fast alles lösen,..., mit eurer Hilfe vielleicht schneller.

3. Ich freue mich wenn mein Weg grundlegend richtig zu sein scheint, aber gibt es nicht irgendwo eine schon fertige Lösung?

Danke

[ChrisB]

Hi,

Warum verspringt eigentlich bei position:fixed der fixierte Bereich in allen Browsern bis auf IE um einige Pixel nachdem er fixiert wurde.

Keine Ahnung - ich sehe nichts.

2. Wie geht das konkret mit document.documentElement.scrollTop bzw. document.body.scrollTop? gelesen hatte ich dies alles schon, aber die Umsetzung ist nicht 1 zu 1 beschrieben, irgendwann lässt sich fast alles lösen,..., mit eurer Hilfe vielleicht schneller.

Dazu muesste man sich erst mal unter deinem Problem konkret was vorstellen koennen - ich weiss nicht, wie's suit und Mathias geht, aber mir zumindest ist immer noch nicht klar, was genau du umsetzen willst. Anschaungsbeispiel waere auch hier hilfreich.

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

Keine Ahnung - ich sehe nichts.

An der von dir verlinkten Stelle ist das zum Sehen benötigte Hilfsmittel benannt. Man muss es nur richtig anwenden. SCNR.

Live long and prosper,
Gunnar

PS: Ich find es auch immer doof, meine Brille ohne Brille suchen zu müssen. 8-)

[Der Martin]

Hallo,

PS: Ich find es auch immer doof, meine Brille ohne Brille suchen zu müssen. 8-)

das kann aber nur Gelegenheits-Brillenträgern passieren[1]. Wer seine Brille ständig auf der Nase hat, ist von diesem Thema weitgehend verschont - ich setze sie eigentlich nur zum Schlafen und zum Duschen ab[2], und dann liegt sie an Stellen, die durch Gewohnheitsrituale bestimmt sind.

So long,
 Martin

[1] Schon mal an einen Ortungs-Piepser am Brillenbügel gedacht, analog zu den sogenannten Key-Findern? ;-)
[2] Oder wenn ich winzige Details genau erkennen will, z.B. SMD-Bauteile. Das ist einer der wenigen Vorteile starker Kurzsichtigkeit: Ich brauch' nie eine Lupe, weil ich mit bloßem Auge bis runter auf Makroentfernung (ca. 5cm) scharf sehen kann. Da ist eine Fingerkuppe beinahe formatfüllend.

[Thomas]

Hi,

Warum verspringt eigentlich bei position:fixed der fixierte Bereich in allen Browsern bis auf IE um einige Pixel nachdem er fixiert wurde.

Keine Ahnung - ich sehe nichts.

»»

Siehe Antwort an Molily, hoffe, das bringt mehr Klarheit und Sicht. Sonst nähern wir uns dem Thema eben iterativ, sukzessiv, oder ...
Danke

2. Wie geht das konkret mit document.documentElement.scrollTop bzw. document.body.scrollTop? gelesen hatte ich dies alles schon, aber die Umsetzung ist nicht 1 zu 1 beschrieben, irgendwann lässt sich fast alles lösen,..., mit eurer Hilfe vielleicht schneller.

Dazu muesste man sich erst mal unter deinem Problem konkret was vorstellen koennen - ich weiss nicht, wie's suit und Mathias geht, aber mir zumindest ist immer noch nicht klar, was genau du umsetzen willst. Anschaungsbeispiel waere auch hier hilfreich.

Auf einigen Seiten scrollt quasi alles bis auf das Div Dialogbox, dass ein Anzeigebereich ist, dann wenn ich etwas anklicke bin ich immer auf Fensterhöhe und der gescrollte Bereich soll auf der angeklickten Seite an der Stelle bleiben und nicht nach oben springen. Jetzt sollte es klar sein.

MfG ChrisB

[molily]

1. Browserweiche für IE ist mir klar mit conditional comments, aber wie geht eine Browserweiche für Safari, dort springt es nämlich noch mal anders als in allen anderen Browsern.

Was springt wie und warum? Untersuche das erst mal, denn Browserweichen solltest du möglichst vermeiden. Im Übrigen wäre eher eine Engine-Weiche sinnvoll, wenn das Problem bei Webkit liegt - nicht nur Safari benutzt diese Engine.

2. Wie geht das konkret mit document.documentElement.scrollTop bzw. document.body.scrollTop? gelesen hatte ich dies alles schon, aber die Umsetzung ist nicht 1 zu 1 beschrieben, irgendwann lässt sich fast alles lösen,..., mit eurer Hilfe vielleicht schneller.

Mit einer Fallunterscheidung bzw. bedingten Anweisung:

if (das eine) { nimm das eine; } else { nimm das andere; }

Bei den besagten Eigenschaften geht das einfach, weil sie entweder 0 sind, was zu false umgewandelt wird, oder größer 0 sind, die zu true umgewandelt wird.

Oder du nimmst das größere mit http://de.selfhtml.org/javascript/objekte/math.htm#max@title=Math.max:

var yOffset = Math.max(document.documentElement.scrollTop, document.body.scrollTop);

Oder es ginge vermutlich auch (alle Browser berücksichtigt):

var yOffset = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

Im standardkonformen Modus mit vollem DOCTYPE braucht dich im IE eigentlich nur document.documentElement.scrollTop interessieren.

3. Ich freue mich wenn mein Weg grundlegend richtig zu sein scheint, aber gibt es nicht irgendwo eine schon fertige Lösung?

Vermutlich, mir ist aber keine bekannt. Die müsstest du suchen.

Mathias

[Thomas]

1. Browserweiche für IE ist mir klar mit conditional comments, aber wie geht eine Browserweiche für Safari, dort springt es nämlich noch mal anders als in allen anderen Browsern.

Was springt wie und warum? Untersuche das erst mal, denn Browserweichen solltest du möglichst vermeiden. Im Übrigen wäre eher eine Engine-Weiche sinnvoll, wenn das Problem bei Webkit liegt - nicht nur Safari benutzt diese Engine.

»»

In meiner CSS-Datei habe ich folgenden Code geschrieben:

#dialogbox {
 margin-top:57px;
 margin-left: 45px;
 float:left;
 padding:0;
 border:none;
}
#dialogboxfix {
 margin-top:75px;
 margin-left: 45px;
 float:left;
 padding:0;
 border:none;
 position:fixed;
}

Auf manchen Seiten habe ich die Box gerne fixiert und nur die weiteren Menüpunkte scrollen nach unten, so dass der Anzeigebereich (Box) immer im Sichtfeld ist, egal was ich gerade anklicke. Auf anderen Seiten scrollt die ganze Seite. Auf den fixierten Seiten springt die Dialogbox um 18 pixel nach oben, so dass ich um das auszugleichen, margin-top 18 pixel größer machen muss, damit die Box auf allen Seiten im ungescrollten Zustand genau an der gleichen Stelle steht. Im IE springt die Box gar nicht. Im Safari 3-4 Pixel mehr oder weniger als sonst die 18.

Ähnliches Problem: Auch bei divs die mit float right oder left und mit fester width und durch margin auf Abstand nebeneinander angeordnet werden bestehen zwischen IE und den anderen Browsern und wiederum Safari geringe Pixelunterschiede. Woher kommt dies jeweils?

Engine bzw. Engine-Weiche und Webkit sagen mir bisher nichts. Werde mal schauen. Aber vielleicht können wir gemeinsam das Problem bissl einkreisen.

2. Wie geht das konkret mit document.documentElement.scrollTop bzw. document.body.scrollTop? gelesen hatte ich dies alles schon, aber die Umsetzung ist nicht 1 zu 1 beschrieben, irgendwann lässt sich fast alles lösen,..., mit eurer Hilfe vielleicht schneller.

Mit einer Fallunterscheidung bzw. bedingten Anweisung:

if (das eine) { nimm das eine; } else { nimm das andere; }

Bei den besagten Eigenschaften geht das einfach, weil sie entweder 0 sind, was zu false umgewandelt wird, oder größer 0 sind, die zu true umgewandelt wird.

Oder du nimmst das größere mit http://de.selfhtml.org/javascript/objekte/math.htm#max@title=Math.max:

var yOffset = Math.max(document.documentElement.scrollTop, document.body.scrollTop);

Oder es ginge vermutlich auch (alle Browser berücksichtigt):

var yOffset = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

Im standardkonformen Modus mit vollem DOCTYPE braucht dich im IE eigentlich nur document.documentElement.scrollTop interessieren.

»»

Danke für die konkreteren Hinweise, da ich hier noch nicht so fit, kann ich noch nicht genau einschätzen, ob das schon konkret genug war, smile, trotzdem danke vorerst.

3. Ich freue mich wenn mein Weg grundlegend richtig zu sein scheint, aber gibt es nicht irgendwo eine schon fertige Lösung?

Vermutlich, mir ist aber keine bekannt. Die müsstest du suchen.

Mathias

[Thomas]

1. Browserweiche für IE ist mir klar mit conditional comments, aber wie geht eine Browserweiche für Safari, dort springt es nämlich noch mal anders als in allen anderen Browsern.

Was springt wie und warum? Untersuche das erst mal, denn Browserweichen solltest du möglichst vermeiden. Im Übrigen wäre eher eine Engine-Weiche sinnvoll, wenn das Problem bei Webkit liegt - nicht nur Safari benutzt diese Engine.
»»

In meiner CSS-Datei habe ich folgenden Code geschrieben:

#dialogbox {
margin-top:57px;
margin-left: 45px;
float:left;
padding:0;
border:none;
}
#dialogboxfix {
margin-top:75px;
margin-left: 45px;
float:left;
padding:0;
border:none;
position:fixed;
}

Auf manchen Seiten habe ich die Box gerne fixiert und nur die weiteren Menüpunkte scrollen nach unten, so dass der Anzeigebereich (Box) immer im Sichtfeld ist, egal was ich gerade anklicke. Auf anderen Seiten scrollt die ganze Seite. Auf den fixierten Seiten springt die Dialogbox um 18 pixel nach oben, so dass ich um das auszugleichen, margin-top 18 pixel größer machen muss, damit die Box auf allen Seiten im ungescrollten Zustand genau an der gleichen Stelle steht. Im IE springt die Box gar nicht. Im Safari 3-4 Pixel mehr oder weniger als sonst die 18.

Ich habe inzwischen festgestellt, dass ich das gleiche Problem mit float und position:absolute habe, es verspringt nach oben. Ich vermute mal es hat mit float zu tun. Wenn ich in anderen Dateien beispielsweise position:fixed oder absolute benutze gibt es kein verspringen nach oben, habe es noch nicht 100% verifiziert, aber einfach zum Update. Vielleicht hat ja schon einer eine Idee.

Thomas