Come scorrere un elemento all'interno del genitore quando passa un elemento fisso?

Question

Questo è un po 'troppo complicato per la mia conoscenza di jQuery/javascript quindi mi dispiace dire che non ho ancora provato nulla. Ho bisogno di alcuni suggerimenti per essere indicato nella giusta direzione!

Il problema è che ho un elemento fisso sulla mia pagina, e quando lo scorrimento verso il basso questo elemento entrerà in diversi wrapper, e mentre in quel wrapper ho bisogno di un elemento figlio più piccolo di "snap" al mio elemento fisso e mentre è nell'elemento

po 'difficile da spiegare, ho fatto un mockup statico qui:

http://jsfiddle.net/ycmYc/

Quando "bottone fisso carrello" raggiunge un prezzo, ho bisogno di collegare e scorrere con il tasto del carrello il più a lungo è dentro i prezzi "product-div". Quando lascia ed entra nel prossimo, il prezzo dovrebbe rimanere nella parte inferiore del prodotto e quindi fare nuovamente clic sul pulsante carrello quando gli utenti lo raggiungono scorrendo verso l'alto.

Bene, di nuovo, mi dispiace per non aver provato nulla ma sono perso. Se dovessi farlo senza alcun aiuto penso che andrei con waypoints.js ma sembra lontano dall'ottimo.

Qualsiasi aiuto MOLTO APPRECATO!

L'elemento fisso avrà sempre la stessa posizione, quindi suppongo che sia possibile utilizzare l'offset dalla parte superiore del browser invece di tenere traccia della sua posizione. Sempre qualcosa;)

Aggiornamento:

lavorato su me stesso, e mi hanno fatto lavorare verso il basso ma non verso l'alto:

dovrebbe chiarire cosa intendo:

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

Quando lo scorrimento dal prezzo, si unisce al pulsante verso il basso e si blocca quando si lascia il contenitore. Il mio problema ora lo sta facendo scattare e tornare alla sua posizione originale quando si scorre verso l'alto :)

Answer 1

questo è solo un brainfart, ma forse le cose vanno (sry, non ho tempo per un violino). Ma ho avuto l'idea, forse di cercare di imbrogliare otticamente.

Quello che intendo è, per calcolare le posizioni assolute di tutte le div di prezzo, nasconderle, e quando il div cart raggiunge la posizione scorrendo, mostra il prezzo div per x quantità di pixel che scorre (o tramite z-index di fare sfondi, non sono sicuro di cosa ti si addice meglio).

Spero che questo aiuti un po ', forse oggi ho tempo per copiarlo.

Answer 2

Dipende dai vincoli. È possibile rilevare la posizione di scorrimento di una finestra con: window.pageYOffset o document.documentElement.scrollTop.

Se le immersioni sono tutte della stessa dimensione, è possibile calcolare facilmente quale div è finito il pulsante e il prezzo position: fixed accanto.

Answer 3

Lo vuoi in questo modo?

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

solo risultato: http://fiddle.jshell.net/ycmYc/39/show/light/

aggiornamento:

ne dici di questo?

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

solo risultato: http://fiddle.jshell.net/ycmYc/93/show/light/