当元素滚动经过页面顶部时动态更改元素值

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);
    }
});

滚动工作正常，我可以在滚动时更改数据，但是，问题是，因为我使用类选择器，它总是只选择类列表中的第一个元素。我不确定如何让它与页面上的每个类元素一起工作，并且我无法为它们提供每个唯一的 ID，因为假设可能有无限的数量，因为它是从日历数据库中提取的，我认为这是不切实际的。

我也尝试让它与 eq[i] 等一起工作，但我也无法弄清楚。我还尝试了使用 $(this) 的各种方法，但没有效果，但也许我实施错误。

我想我必须按照

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

But offset().change() isn't support 做一些事情。

任何帮助将不胜感激！

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());
    }
  });  
});