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

Beitrag lesen

SELF-Forum

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

Thomas
– Informationen zu den Bewertungsregeln
  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.

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

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

Beitrag melden
–
Informationen zu den Bewertungsregeln