jquery - динамически изменяет значения элемента, когда элемент прокручивается за верхнюю часть страницы

Question

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

Мой HTML выглядит примерно так:

<div class="event_date">Jan 1, 2012</div>
<div> stuff here </div>
<div> stuff here </div>
<div class="event_date">Jan 2, 2012</div>
<div> stuff here </div>
<div> stuff here </div>
<div class="event_date">Jan 3, 2012</div>
<div> stuff here </div>
...

У меня уже есть фиксированный блок div, который не перемещается, когда пользователь прокручивает страницу

<div id="current_date_box"></div>

Мой текущий JavaScript выглядит так:

$(window).scroll(function(){
    if ($(".event_date").offset().top < $(window).scrollTop()) {
        //the code only affects the first element with class event_date
        var selected_date = $(".event_date).html();
        $("#current_date_box").html(selected_date);
    }
});

Прокрутка работает нормально, и я могу изменить данные при прокрутке, однако проблема в том, что, поскольку я использую селектор классов, он всегда выбирает только первый элемент из списка классов. Я не уверен, как заставить его работать с каждым элементом класса на странице, и я не могу дать им каждый уникальный идентификатор, потому что гипотетически может быть бесконечное количество, потому что он взят из базы данных календаря, и это просто не практично, я думаю ,

Я также пытался заставить его работать с eq [i] и т. Д., И я тоже не могу понять это. Я также пробовал различные способы использования $ (this) безрезультатно, но, возможно, я неправильно его реализую.

Я думаю, что должен сделать что-то вроде

$(".event_date").offset().change() do something

Но offset (). Change () не поддерживается.

Буду признателен за любую помощь!

Answer 1

Селектор класса должен возвращать коллекцию всех соответствующих элементов. Но вы должны обернуть это в каждую функцию, я думаю ...

$(window).scroll(function(){
  $window = $(window);

  $(".event_date").each(function() {
    var $this = $(this);
    if($this.offset().top < $window.scrollTop()) {
      $("#current_date_box").html($this.html());
    }
  });  
});