如何检测一个元素在jquery中滚动到页面顶部的时间？ [英] How to detect when an element scrolled at the top of a page in jquery?

问题描述

我要为网站创建时间轴，例如 Google时间轴 ，我有一些divs与年的名称与分隔符，当我向上滚动并到达一个div在页面的顶部年份标题在左侧应该是

I am going to create a timeline for a website, something like Google timeline, I have some divs with the name of years with a class separator and when I scrolled up and reached a div at the top of page the year title at the left side should be changed to other year.

这是我的HTML结构（仅作为示例）：

This is my HTML structure (just for example):

<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代码应该是什么，应该使用什么函数？

What should be my jquery code, and what functions should I use?

推荐答案

这里有一个非常基本的东西你可以做：
http://jsfiddle.net/atq0sh6y/

Here's a very basic fiddle on what you can do: 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'));
        }
    });
});

希望它有帮助。

这篇关于如何检测一个元素在jquery中滚动到页面顶部的时间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！