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

Question

这个问题听起来可能很愚蠢，但它让我很头疼。我想制作一种由不同幻灯片组成的垂直滚动演示文稿；效果应该与这个网站“相似”:http://www.soleilnoir.net/believein/#/start

我创建了一个包含不同幻灯片的无序列表:

<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>

我给了一个 position:fixed在页面的中心到所有幻灯片的内容(到目前为止是图像)，以及一个不同的 z-index 来使幻灯片和图像堆叠。有点像

-----  slide 1
  §§§ image 2
-----  slide 2
  §§§ image 3
----   slide 3

等等

当然，这仅在某种意义上有效:幻灯片在滚动时会显示下一张幻灯片，但之前的图像始终可见，但由于其固定位置而被全部从流程中删除。

所以我想给图片一个position:absolute (并将 position:relative 给 <li> )但这不会使它们“粘”在页面中央，直到新幻灯片到达并覆盖它，它们当然自然地跟随它们的父级 <li>在他们的运动中。

我完全不知所措，也不知道如何在窗口中获取当前可见列表。我查看了 jQuery 提供的所有内置函数:scrollTop() , offset().top , position().top , 我得到了 $(window).height() , $('#container').height() , <li> s 的高度是固定的，等等，但我得到的只是元素的“绝对”位置(我的意思是，它不会随着滚动而改变)，我不知道如何说幻灯片何时在屏幕的中间，这样我就可以做点什么(虽然仍然不知道是什么)。

我确定我在这里遗漏了一些明显的东西。我已经研究了链接站点的代码，虽然我几乎可以理解它的所有内容，但我仍然无法弄清楚它是如何获取当前幻灯片的(此外，它的工作方式与我的不同，因为它动态加载动画 gif 并且仅对每张幻灯片执行此操作。在我的幻灯片中，每张幻灯片都是一个包含不同元素、动画等的容器)。

我如何获得，例如，$('li#slide3')是里面的景色吗？如何解决堆叠图像问题？我是否需要动态地将它们设置为“固定”，或者在每次滚动时重新计算它们的位置，以便 position:absolute会做？对于这一秒，我仍然需要获取每个元素相对于固定点的位置(我相信 $(window).scrollTop() ，到目前为止滚动时它总是给我 0)，但我不知道如何做。

哦，我正在使用 jQuery scroll()绑定(bind)滚动的方法，因为我还有一个导航列表，可让您跳转到所需的幻灯片，它也说明了这一点。

我希望我清楚地说明了这一点:图像必须始终位于中心，滚动幻灯片时需要将它们覆盖起来，而当图像被覆盖时，以下内容需要出现并取代它的位置，所以我需要了解如何获取当前 <li> 的位置元素，说当它穿过窗口的一半时，并相应地设置上一个图像。

Answer 1

这类网站使用视差效果来移动背景图片。

考虑使用 jQuery Parallax 插件，例如 jparallax这可以使事情变得容易得多。

但对于整个网页，您可能需要求助于jQuery Parallax Plugin有一个基于您提供的示例的演示页面。该演示页面也是一个教程!

还有 a lot of websites这可以为您提供进一步的想法，并且通过查看网页的内部，您可以找出他们使用的是什么类型的视差插件。

编辑:Firefox 浏览器内置了一个非常好用的工具，因此您可以在分层 3D 结构中查看任何网页。这将有助于了解该网站如何与分层背景进行交互。更多关于 Firefox 3D View HERE .

编辑 2: 这可能有用:How to tell if a DOM element is visible in the current viewport?

此外，对于您提供的网站示例，可以在他们的 style.css 中看到他们用于在图像滚动到 View 后在视口(viewport)中居中的方法。文件。当然他们有 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 插件，它与您的链接示例执行相同的操作，并且具有非常强大的 API。这个特定的插件具有自定义偏移的每层定位。

这是一个 website使用该插件，其中的内容在屏幕中央排列。
这个其他website显示此插件在选择任何图层进行交互时没有问题。

该插件名为 Stellar.js，gitHub 页面为 HERE .如果你去那里home page ，它会水平滚动……请注意 stars 中的 EASY 这个词，这是一种与浏览器视口(viewport)边缘对齐的视差效果。当您滚动时，其他星标将在一般区域自动滚动以显示其他关键字。