如何在jquery中检测元素在页面顶部滚动的时间？

Question

我要为网站创建一个时间轴，例如Google timeline，我有一些带有类separator年份的div，当我向上滚动并到达div时页面顶部左侧的年份标题应更改为其他年份。

这是我的HTML结构（仅举例）：

<div class="separator" data-year="2015">
  <!--Something Here-->
</div>

<div class="separator" data-year="2014">
  <!--Something Here-->
</div>

<div class="separator" data-year="2013">
  <!--Something Here-->
</div>


<div class="separator" data-year="2012">
  <!--Something Here-->
</div>

我的jquery代码应该是什么，我应该使用哪些函数？

Answer 1

这是一个非常基本的小提琴，你可以做什么： http://jsfiddle.net/atq0sh6y/

jQuery代码：

$(document).scroll(function(){
    $('.separator').each(function(){
        var top = $(window).scrollTop();
        var off = $(this).offset();
        if(top>off.top) {
            $('.header').text($(this).data('year'));
        }
    });
});

希望它有所帮助。