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

但不支持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());
    }
  });  
});

jquery - 当元素滚动到页面顶部时动态更改元素值

1 个答案: