JQuery / JavaScript - Svolta verso il basso, cambia altezza e posizione di una textarea

Question

Sto cercando un modo per fare un effetto che è più probabile una combinazione di cose, la base di esso sarebbe qualcosa del genere: http://nikestadiums.com/ Come puoi vedere, quando scorri giù, un div è in realtà scorrevole. Non sono sicuro che ci sia un tale plugin, e se c'è, è possibile ridimensionare e forse riposizionare gli elementi mentre scorri verso il basso?

Ho visto il post: Come Make Div Scorri verso il basso con una pagina Una volta raggiunto la pagina iniziata? E conosco degli elementi appiccicosi http://imakewebthings.github.com/jquery-waypoint / elementi appiccicosi /

è anche possibile fare qualcosa del genere? Se sì, puoi darmi collegamenti / esempi per favore? E naturalmente ho bisogno di renderlo super super liscio come il nike uno ... ha

Ecco un jsfiddle, ma non riesco a farlo funzionare bene. http://jsfiddle.net/3u2gj/65/

Grazie.

Answer 1

Ho modificato il tuo jsfiddle.L'ho testato in Chrome, Firefox e IE7 +.

http://jsfiddle.net/t0nyh0/amxrq/3/ L'ho ripulito un po 'e ha spostato tutti i tuoi "stati" in classi.Sul rotolo, utilizza semplicemente jQuery per aggiungere e rimuovere le classi in base alla posizione di scorrimento.

Nota che non c'è animazione, se si desidera animarla, è possibile utilizzare le transizioni di classe per animare.Vedi altro: http://docs.jquery.com/ui/effects/classtransitions .

Per quanto riguarda l'immissione della modalità completa sul tastodown, è possibile creare nuovamente una classe "Espandi" e applicarla al tastodown.È quindi possibile strutturare il tuo CSS come segue:

.minState3.expand {  }

.

e per mostrare nuovamente il pulsante

.minState3.expand button { display:block; }

.

Farlo in questo modo ti consente la flessibilità di definire come sembra in base ai diversi stati.