如何使用jQuery在垂直滚动网站中获取当前可见幻灯片
这个问题可能听起来很傻，但它让我头疼。 我想制作一种由不同幻灯片组成的垂直滚动演示文稿; 效果应与本网站“相似”： http ： //www.soleilnoir.net/believein/#/start
我创建了一个包含不同幻灯片的无序列表：
-
-
我给出了一个position:fixed在页面中心的所有幻灯片的内容（到目前为止是图像），以及一个不同的z索引，以使幻灯片和图像堆叠。 就像是
----- slide 1 §§§ image 2 ----- slide 2 §§§ image 3 ---- slide 3
等等
这当然仅在某种意义上起作用：当滚动时，幻灯片揭示下面的幻灯片，但是由于其固定的定位，以前的图像始终可见而全部从流中移除。
所以我想给图像一个position:absolute （并给出position:relative对于
。
我完全不知所措，还有如何在窗口中获取当前的可见性列表。 我查看了jQuery提供的所有内置函数： scrollTop() ， offset().top ， position().top ，我得到$(window).height() ， $('#container').height() ，
我确定我在这里遗漏了一些明显的东西。 我已经研究了链接网站的代码，虽然我几乎可以理解它的所有内容，但我仍然无法弄清楚它是如何获得当前幻灯片的（此外，它与我的工作方式不同，因为它加载动画GIF动态和每张幻灯片只会这样做。在我的每张幻灯片中都是一个包含不同元素，动画等的容器。
例如，如果$('li#slide3')在视图中，我该如何获得？ 如何解决堆叠图像问题？ 我是否需要动态地将它们设置为“固定”，或者在每次滚动时重新计算它们的位置以便position:absolute会做什么？ 对于这一秒，我仍然需要将每个元素的位置与固定点进行比较（我相信$(window).scrollTop() ，到目前为止在滚动时总是给出0），但我无法弄清楚怎么样。
哦，我正在使用jQuery scroll()方法绑定滚动，因为我还有一个导航列表，可以让你跳转到所需的幻灯片，它也解释了这一点。
我希望我在这方面做得很清楚：图像必须始终保持在中心，而滚动幻灯片需要覆盖它们，当图像被覆盖时，以下需要出现并取而代之，所以我需要了解如何获取当前
那种类型的网站使用视差效果来移动背景图像。
考虑使用jQuery Parallax插件 ，例如jparallax ，可以让事情变得更容易。
但是对于整个网页 ，您可能希望转向具有基于您提供的示例的演示页面的jQuery Parallax插件 。 该演示页面也是一个教程！
还有很多网站可以为您提供进一步的想法，通过查看网页，您可以找到他们正在使用的视差插件类型。
编辑：使用的优秀工具内置于Firefox浏览器中，因此您可以在分层3D结构中查看任何网页。 这将有助于了解该网站如何与分层背景进行交互。 有关Firefox 3D的更多信息，请查看 此处 。
编辑2：这可能很有用： 如何判断DOM元素在当前视口中是否可见？
此外，对于您提供的网站示例，一旦将图像滚动到视图中，它们用于将图像置于视口中心的方法可以在他们的style.css文件中看到。 当然他们有jQuery修改这些元素，但风格确实有意义：
#main ul.bg li img.gif { position: absolute; z-index: 1; width: 996px; height: 800px; left: 50%; right: 50%; top: 50%; bottom: 50%; margin: -400px -498px; }
编辑3：这是一个jQuery Parallax Plugin ，与你的链接示例做同样的事情，并且有一个非常强大的API。 此特定插件具有每层定位和自定义偏移。
这是一个使用该插件的网站 ，其中的东西排列在屏幕的中央。
此其他网站显示此插件在选择要与之交互的任何图层时没有任何问题。
该插件名为Stellar.js ，gitHub页面为HERE 。 如果你访问主页 ，它会水平滚动…注意星星中的EASY这个词是一个视差效果，排列到浏览器视口边缘。 当您滚动时，其他星星会在常规区域中自动滚动以显示其他关键字。
我看看HTML演变，div＃容器有一个很大的高度（li * li高度），li有display：none / block，overflow：hidden和0到窗口高度之间的高度。