Wie scrollt man ein Element im Elternteil, wenn ein festes Element passiert?

Question

Dies ist ein bisschen zu schwierig für meine jQuery/Javascript-Kenntnisse, so tut mir leid zu sagen, ich habe noch nicht wirklich etwas versucht. Ich brauche ein paar Hinweise, um in die richtige Richtung zu zeigen!

Das Problem ist, dass ich ein festes Element auf meiner Seite habe, und beim Scrollen nach unten dieses Element wird verschiedene Wrapper eingeben, und während ich in diesem Wrapper brauche ich ein kleineres Kind Element "Snap" zu meinem festen Element und während es ist im Element.

Art schwer zu erklären, habe ich eine statische Mockup hier:

http://jsfiddle.net/ycmYc/

Wenn „fixed Wagentaste“ einen Preis erreicht, ich brauche es mit dem Wagentaste zu befestigen und blättern, solange Es ist in den Preisen "Produkt-Div". Wenn es den nächsten verlässt und in den nächsten eintritt, sollte der Preis unten auf seinem Produkt bleiben und dann erneut auf den Warenkorb-Knopf klicken, wenn der Benutzer es erreicht, indem er nach oben scrollt.

Nun, nochmal, tut mir leid, dass ich nichts versucht habe, aber ich bin verloren. Wenn ich dies ohne Hilfe tun müsste, würde ich mit waypoints.js gehen, aber es fühlt sich alles andere als optimal an.

Jede Hilfe VIEL APPLIZIERT!

Das fixierte Element wird immer die gleiche Position haben, daher kann der Abstand vom oberen Ende des Browsers verwendet werden, anstatt die Position zu verfolgen. Immer etwas;)

Update:

mich daran gearbeitet, und habe es funktioniert nach unten, aber nicht nach oben:

sollte klarstellen, was ich meine:

http://retype.se/temp/scrolltest/test.html

Beim Scrollen Bei dem Preis schließt sich der Knopf nach unten und reißt beim Verlassen des Behälters los. Mein Problem ist jetzt, es zu fangen und scrollen zurück in seine ursprüngliche Position beim Scrollen nach oben :)

Answer 1

Dies ist nur ein Brainfart, aber vielleicht bringt es die Dinge (sry, habe keine Zeit für eine Geige). Aber ich kam auf die Idee, vielleicht optisch zu schummeln.

Was ich meine ist, um die absoluten Positionen aller Preis Divs zu berechnen, verstecken sie, und wenn das Cart Div durch Scrolling diese Position erreicht, zeigen Sie das Preis div für x Menge an Pixel Scrolling (oder über Z-Indizes von Hintergründe machen, nicht sicher, was dir besser passt).

Hoffe, das hilft ein bisschen, vielleicht bekomme ich heute die Zeit, um es auszuarbeiten.

Answer 2

Es hängt irgendwie von den Einschränkungen ab. Sie können die Bildlaufposition eines Fensters mit folgenden Zeichen erkennen: window.pageYOffset oder document.documentElement.scrollTop.

Wenn die divs alle die gleiche Größe haben, können Sie leicht berechnen, welche div die Schaltfläche ist und die position: fixed den Preis daneben.

Answer 3

Wollen Sie es so?

http://jsfiddle.net/ycmYc/39/

nur zur Folge haben: http://fiddle.jshell.net/ycmYc/39/show/light/

aktualisiert:

Wie wäre das?

http://jsfiddle.net/ycmYc/93/

nur zur Folge haben: http://fiddle.jshell.net/ycmYc/93/show/light/