Изменить div, когда он просматривает другой div - PullRequest
Новая
       25

Изменить div, когда он просматривает другой div

1 голос
/ 23 марта 2011

У меня длинная горизонтальная страница, подобная этой: 

<div id="viewport"></div>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

Div Окно просмотра расположено абсолютно по левому краю экрана.Остальные элементы div плавают по горизонтали.

Что я хочу сделать, так это то, что когда каждый из перемещаемых элементов div прокручивается в элемент viewport, они изменяют некоторые свойства CSS (например, непрозрачность).Я хочу, чтобы div стал «активным» или выделенным при прокрутке.

Спасибо!

Ответы [ 2 ]

2 голосов
/ 24 марта 2011

Я не думаю, что вы могли бы сделать свой собственный обработчик событий, чтобы сделать это, но вы могли бы просто проверить код, который перемещает div, если они находятся внутри области просмотра, и применить класс подсветки, используя функцию jQuery .animate (). легко, как то так http://jsfiddle.net/sRhJH/24/

0 голосов
/ 24 марта 2011

Метод jQuery offset() даст вам позицию элемента в документе.

Используйте его вместе с width(), чтобы определить местоположение области просмотра div: 

var vp = $('#viewport'),
    vp_offset = vp.offset(),  // has x and y properties
    vp_width = vp.width();

Затем подключитесь к событию прокрутки window, чтобы получить данные о положении элементов страницы: 

$(window).scroll(function() {
    // use similar offset code used above for determining the location of the 
    // scrolling moving divs
});
...