如何使用jQuery在垂直滚动站点中获取当前可见幻灯片

这个问题听起来可能很傻，但它让我头疼。我想做一种垂直滚动演示，由不同的幻灯片组成；效果应与本网站“相似”：

我创建了一个无序列表，其中包含不同的幻灯片：

<div id="main">
  <div id="content">
    <ul id="bg">
      <li id="slide1"> <!-- content --></li>
      <li id="slide2"> <!-- content --></li>
    <!-- and so on -->
    </ul>
  </div>
</div>

等等

当然，这只在某种意义上起作用：当滚动幻灯片时，会显示下面的幻灯片，但是前面的图像总是可见的，因为它们的固定位置，所以从流中删除了所有图像

所以我想给图片一个

位置：绝对的
（给
位置：相对的
，
），但这不会让它们在新幻灯片到达并覆盖它之前在页面中央“粘粘”，它们当然会跟随它们的父级

我完全不知道这一点，也不知道如何在窗口中获取当前的可视列表。我查看了jQuery提供的所有内置函数：
scrollTop（）
，
offset（）.top
，
position（）.top
，我得到了
$（窗口）。height（）
，
$（“#容器”）。height（）
，
的高度是固定的，等等，但我得到的都是元素的“绝对”位置（我的意思是，它不会随着滚动而改变），我不知道如何说出幻灯片在屏幕中间的位置，以便我可以做些什么（尽管我仍然不知道是什么）

我确信我在这里遗漏了一些明显的东西。我已经研究了链接站点的代码，虽然我几乎可以理解其中的所有内容，但我仍然不知道它是如何得到当前幻灯片的（此外，它的工作原理与我的不同，因为它以动态方式加载动画GIF，并且只对每张幻灯片进行加载。在我的幻灯片中，每张幻灯片都是一个包含不同元素、动画等的容器）

例如，如果
$（'li#slide3'）
是内部视图，如何获取？如何解决堆叠图像问题？是否需要将其设置为“已修复”动态地，或者在每次滚动时重新计算它们的位置，这样一个
位置：绝对的
就可以了？对于这一秒，我仍然需要得到每个元素相对于一个固定点的位置（我相信
$（window）.scrollTop（）
，到目前为止，滚动时它总是给我0），但我不知道怎么做

哦，我正在使用jQuery
scroll（）
方法绑定滚动，因为我还有一个导航列表，可以让您跳转到所需的幻灯片，它也解释了这一点

我希望我清楚地说明了这一点：图像必须始终保持在中心位置，滚动幻灯片时需要将其覆盖，当图像被覆盖时，需要显示并替换以下内容，因此我需要了解如何获取当前
元素的位置，例如当它在窗口中间时，以及相应地设置上一幅图像。
该类型的网站正在使用视差效果来移动背景图像

考虑使用一个jQuery视差插件，比如它可以让你的工作变得更容易

但是，对于整个网页，您可能希望根据您提供的示例打开一个演示页面。该演示页面也是一个教程

还有一个可以给你更多的想法，通过查看网页内的，你可以找到他们使用的视差插件的类型

编辑：Firefox浏览器中内置了一个非常好的工具，您可以查看分层3D结构中的任何网页。这将有助于了解该网站如何与分层背景交互。有关Firefox 3D视图的更多信息

编辑2:这可能很有用：

此外，对于您提供的网站示例，在文件中可以看到他们在滚动到视图中后将图像居中的方法。当然，他们让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视差插件，它的功能与链接的示例相同，并且有一个非常强大的API。这个特定的插件具有自定义偏移的每层定位

这是一种使用插件的方法，在该插件中，内容排列在屏幕中央。

另一个显示这个插件在选择任何层进行交互时没有问题

该插件名为Stellar.js，gitHub页面名为。如果您访问该插件，它会水平滚动……请注意stars中的EASY一词，它是一种视差效果，与浏览器的视口边缘对齐。当您滚动时，其他stars将在常规区域自动滚动以显示显示其他关键字。
我看HTML的发展，div#容器有一个很大的高度（li的数量*li的高度），我有display:none/block，overflow:hidden，高度在0和窗口高度之间。
我建议将
offset
标记改为
parallax
标记。我知道parallax插件，并在一些项目中使用过它，但该网站没有使用它——尽管它所达到的效果可以被视为一种视差样式。对此我非常确定see it每次计算图片的距离；我只是不知道它是如何获得当前幻灯片的。无论如何，你链接到的网站很好（我以前没有看到nikeworld），可能值得一试，虽然这不是我所需要的。我看到了，我也知道你链接的列表中的站点…a+1值得，它没有回答我的问题，但它可能是一个很好的选择。据我所见，你提供的示例链接只是一个正在使用的自定义视差引擎…许多三角数学函数在计算中都很明显使用视差插件的好处
#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; }