Div's beim Scrollen horizontal verschieben
 

Hallo,

ich möchte gerne zwei Div's (rot und grün) beim Scrollen nach links bzw. rechts verschieben, damit ein drittes Div (gelb) dazwischen durchlaufen kann.
Ich habe schon etwas herumexperimentiert, allerdings passt das Ergebnis noch nicht ganz.
Demo

Problem
Die Verschiebungen der beiden Div's (rot und grün) scheinen nicht immer gleich zu sein. Je nachdem wie ich den Scrollbalken bewege funktioniert es einmal, ein anderes Mal überschneiden sich die Div's.

Hat jemand einen Tipp oder sieht einen Fehler meinerseits.

So?
Edit fiddle - JSFiddle

Wie sollen die Div´s bei dir denn immer gleich verschoben werden, wenn du mit die Variable s dynamisch berechnen lässt. Die ändert sich ja immer je nachdem wie weit du runtergescrollt hast.

z.B.: 10px nach unten gescrollt --> verschiebung 5.2 * 10 = 52px
20px nach unten gescrollt --> verschiebung 5.2 * 20 = 104px


Wenn ich das richtig interpretiert habe...

Ich sehe das Problem eher darin, dass du immer um einen festen Wert verschiebst. Aber je nach Breite des Anzeigefensters ist die linke/rechte Ecke der mittleren Box wo anders.

Statt dieser ganzen jQuery-Methoden würde ich mal auf ein Paar native Befehle zurückgreifen. Mit offsetLeft und offsetWidth bekommst du die Pixelpositionen der Boxen. So kannst du mit jedem window.onresize die Position berechnen, die die Boxen haben müssen, wenn sie neben der mittleren Box sind.

Für die eigentliche Animation würde ich dann mit einem [0, 1]-Wert arbeiten.
Also:
urspruenlichePositionVonLinkerBox ist dann im onload linkeBox.style.offsetLeft + linkeBox.style.offsetWidth;

Hier liegt s jetzt zwischen 0 und 1. Bei 0 ist die Box an ihrer alten Stelle, bei 1 neben der mittleren Box und für Werte dazwischen eben dazwischen.

Die Fragliche Zeile musst du jetzt eben im onresize und im onscroll aufrufen. Das s muss im onscroll berechnen werden.

Achja: Wenn die Boxen unterschiedliche offsetParents haben, kann die Berechnung mit offsetLeft falsch werden. Dann musst du noch mehr Code für die Positionsberechnung schreiben :D