Jquery / Javascript - при прокрутке вниз, изменить высоту и положение текстовой области

Question

Я ищу способ сделать эффект, который, скорее всего, является комбинацией вещей, основа которого будет выглядеть примерно так: http://nikestadiums.com/ Как вы можете видеть, когда вы прокручиваете вниз,Div на самом деле скользит вверх.Я не уверен, что есть такой плагин, и если есть, можно ли изменить размер и, возможно, переместить элементы при прокрутке вниз?

Я видел пост: Как сделатьdiv прокрутите страницу вниз, как только она достигнет верхней части страницы? и я знаю о липких элементах http://imakewebthings.github.com/jquery-waypoints/sticky-elements/

Возможно ли вообще сделать что-то подобное?Если да, можете ли вы дать мне ссылки / примеры, пожалуйста?И, конечно, мне нужно сделать его супер супер плавным, как у Nike ... ха

Вот jsfiddle, но я не могу заставить его работать правильно.http://jsfiddle.net/3U2Gj/65/

Спасибо.

Answer 1

Я изменил ваш JSFiddle. Я тестировал его в Chrome, Firefox и IE7 +.

http://jsfiddle.net/t0nyh0/aMXRq/3/

Я немного почистил его и переместил все ваши "состояния" в классы. При прокрутке он просто использует JQuery для добавления и удаления классов на основе позиции прокрутки.

Обратите внимание, что анимация отсутствует, если вы хотите анимировать ее, вы можете использовать переходы классов для анимации. Подробнее здесь: http://docs.jquery.com/UI/Effects/ClassTransitions.

Что касается входа в полный режим при нажатии клавиш, вы можете снова создать класс «расширения» и применить его при нажатии клавиш. Затем вы можете структурировать свой CSS следующим образом:

.minState3.expand {  }

и снова показать кнопку

.minState3.expand button { display:block; }

Делая это таким образом, вы можете гибко определять, как это выглядит на основе различных состояний.