向下滚动时尝试在元素中重新创建幻灯片

Question

我正在寻找有关如何重新创建此功能的一些指导。它的作用是当你滚过某一点时，右边的某些东西滑入。你可以在这里看到它的动作。 http://mashable.com/2011/08/19/hp-touchpad-lower-prices-canada/#comment-17611181

任何人都可以帮我理解这是怎么回事吗？源代码没有告诉我什么..

Answer 1

可能有一个jQuery插件可以满足您的需求，但由于我没有，所以这是基本程序：

1. 在窗口上设置滚动事件侦听器：$(window).scroll(function(){…});
2. 在该事件监听器函数中，检查window.scrollY属性，即页面向下滚动的像素数
3. 如果该值高于/低于某个阈值，则分别显示/隐藏滑动元素

您还可以使用window.scrollY + window.innerHeight查找浏览器中可见的最低像素位置。然后，您可以将其与页面上某些元素的位置进行比较。例如，如果您希望在用户滚动到主要内容的底部时显示滑动元素，请检查内容元素的下边缘（即顶部偏移+高度）是否小于scrollY + innerHeight。如果是，则用户已滚动到或超过内容元素，您可以将元素滑入。

滑动元素iself应该用position:fixed设置样式（顺便说一下，它不适用于IE6，但是there are ways around that）并锚定到窗口的rigth / bottom。然后，滑动动画应该将right位置从负元素的宽度设置为零，然后将其滑入（隐藏它时反之亦然）

Here's a simple demo（没有动画，只是隐藏/显示）