|
|||
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. |
Sponsored Links |
|
|||
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... Geändert von leex279 (21.06.2014 um 14:34 Uhr) |
Sponsored Links |
|
|||
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: Code:
linkeBox.style.left = - linkeBox.style.offsetWidth + mittlereBox.style.offsetLeft * s + urspruenlichePositionVonLinkerBox * (1-s) + 'px'; 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 Geändert von MitjaStachowiak (22.06.2014 um 15:51 Uhr) |
Stichwörter |
scroll, scroll to, scrolltop, verschieben |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren | Alien | CSS | 17 | 20.03.2011 11:23 |
scrollen innerhalb eines divs | chopsui | Javascript & Ajax | 4 | 08.12.2009 22:55 |
Divs horizontal anordnen, mit <li>, float? | funky^mariechen | CSS | 12 | 29.08.2008 03:08 |
Innerhalb eines DIV's mit Hotspot scrollen | TimoF | Javascript & Ajax | 2 | 03.06.2008 16:43 |
Problem: 3 Div's horizontal positionieren | Krieju | CSS | 2 | 07.05.2004 18:00 |