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

Question

我正在寻找一些有关如何重新创建此功能的指导。它的作用是，当您滚动经过某个点时，某些东西就会滑入右侧。你可以在这里看到它的 Action 。 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。如果是，则用户已滚动到或经过该内容元素，您可以将该元素滑入。

滑动元素本身应该使用 position:fixed 进行样式设置(顺便说一句，这在 IE6 中不起作用，但 there are ways around that )并锚定到窗口的右侧/底部。然后，滑动动画应将右位置从元素宽度的负值设置为零，以将其滑入(隐藏时则相反)

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