jquery - 如何从 apple.com/ipod-nano 重新创建图像滑入效果

Question

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

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

问题是有太多的链接.js文件，我很难从杂乱的东西中查看所涉及的关键代码。我敢肯定，有许多链接页面只是在处理流畅性和次要细节。

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

score 0 · Accepted Answer

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

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

http://jsfiddle.net/mblase75/LtMgP/——滚动页面并注意“marker”这个词，它会在页面的中途从黑色切换到蓝色。代码：

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

1 回答 1