Question

我注意到苹果网站上有一个很好的滑入式效果。向下滚动页面时，图像变得可见（滑入视图）。 http://www.apple.com/ipod-nano

我正在尝试隔离所涉及的关键脚本。我将纳米页面代码放入Dreamweaver进行调查。它似乎是一个自定义的Javascript onscroll事件，并结合了-webkit- CSS修饰符。

问题在于，有很多链接的.js文件，我无法通过杂乱来查看所涉及的密钥代码。我确定有许多链接页面正在处理平滑和细微的细节。

重新创建此功能需要做什么？任何提示都非常感谢。

Answer 1

在jQuery中执行此操作的最简单方法是使用.scrollTop()跟踪窗口的滚动位置，并使用.offset().top将其与DOM元素的位置进行比较。

当它们相等时，DOM元素已到达浏览器窗口的顶部。或者您可以添加一定数量的像素或$(window).height()来检测它何时进入视野。

http://jsfiddle.net/mblase75/LtMgP/ - 滚动页面并注意单词＆＃34; marker＆＃34;，它将在页面的中途从黑色切换为蓝色。代码：

$(window).on('scroll', function() {
    if ($(window).scrollTop() > $('p').offset().top-100) {
        $('p').css('color','blue'); 
    };
});