1

I have some code that detects when you scroll which then calls a function.

In this function I want to be able to fade in content as you scroll. So as I reach the bottom of the page it calls a function then snippets of static html is then faded in, say 10 rows of content at a time.

Hopefully someone can help me finish this off as im stuck: -

http://jsfiddle.net/sTSxS/

Thanks

4

2 回答 2

2

好的，首先您可能需要某种比例来确定要淡入多少行。为什么需要这个比例？如果用户只向下滚动一英寸，您不想淡入 6 英寸的内容。

我想在这里做一个说明，并指出在您的最终实现中，比例不是您想要使用的。尽管这是一种考虑解决方案的简单方法，但实际上您将希望淡入与您的页面位置和内容大小相关的大量内容。此外，您将希望内容淡入，即使访问者看不到整行（如果需要，我稍后可以帮助您）。

出于我们的目的，假设每行的高度为 20px，行之间没有空格，我们的比率是每滚动 20px 1 行淡入（请注意，按照这个比例，您的内容不会淡入，直到您将其完全滚动到视图中）。

下一步是设计一种方法来跟踪您滚动了多少。为简单起见，我们只使用一个变量来保存当前窗口位置（此变量将在每滚动 20px 后更新）：

var current = $(window).scrollTop(); //sets the initial value

接下来，您将想要创建一种方法来跟踪您已经淡入的行数。有很多方法可以做到这一点（有些比我要使用的更好），但为了起见，我将使用一个变量简单的。

var rowsShown = 0;

接下来，您需要编写滚动事件处理程序来调用您的代码以确定您是否应该，如果是，则淡入您的行：

$(window).scroll(function () {
    ...code to determine if you should and actually fade in rows...
});

现在您需要编写条件来确定是否应该淡入任何行。您首先编写另一个变量来确定新窗口位置，并将其与之前的位置进行比较，存储在current. 请记住，我们的比例是每行 20px，因此窗口必须滚动至少 20px 才能淡入另一行：

var newPosition = $(window).scrollTop();

if ((newPosition - current) >= 20) {
    ...fade in rows...
    current += 20; //update current
}

我想指出，为了我们在这个简单的“教程”中的目的，您需要将 current 设置为比以前多 20，而不是将其更新到新的当前位置 ( newPosition)。你为什么问？因为鼠标并不总是一次滚动一个像素（事实上，它们几乎不这样做），所以我们保持简单，每行 20px 淡入，我们希望通过保持当前为 20 的倍数来保持该比例。当需要编写最终版本时，您可能希望将其更改为current = newPosition;然而。

接下来，您将不得不编写淡入代码：

$(rowsToFadeIn).eq(rowsShown).fadeIn(speed, function () {
    rowsShown += 1; //increment the accumulator
    ...do any other call back stuff here...
});

最后，您将需要编写一个类似的方法来向上滚动和淡出您的内容（否则，如果您向上滚动并再次开始向下滚动，您将不会看到您的内容淡出它 - 它会在您面前淡出）。

请注意，这不是完整的实现——这只是为了让你开始。并得到一些东西供您测试和玩耍。一旦你让它工作，我会修改脚本的效果部分以使用.promise().done()以确定前一个效果何时完成。如果您对使用 a 感到不舒服，.promise().done()那么我会执行以下操作：

  1. 创建一个变量var fading = 0来保存您当前正在淡出的元素数量。

  2. 每次您要开始淡化一个元素时，您将执行以下操作：

    1. 添加一个到fading

    2. 通过类似这样的调用调用你的效果：

      $(rowsToFade).eq(rowsShown).delay((fading - 1) * speed).fadeIn(.....

      • (fading - 1) * speed等待所有当前正在运行的淡入淡出延迟（不包括您将要运行的淡入淡出）
    3. 在您的.fadeIn()方法的回调中，从淡入淡出 ( ) 中减一，fading -= 1;以防止不必要的延迟。


如果我是你，我会尽量避免使用计时器。他们有相当多的开销，而且他们永远不会完全按照您的意愿行事。另外，使用淡入淡出之类的东西往往会产生断断续续的效果，尤其是在速度较慢的浏览器中，偶尔在 Chrome 等较快的浏览器中。

如果您对此有任何疑问，请告诉我。我很乐意提供帮助。祝你好运！:)

编辑：我几乎忘记了，如果您的元素是正常流程的一部分，您将不得不将主体或包装元素的高度设置为高度，因为display: none（对于fadeInand是必需的fadeOut）将从中删除它们流动并将您的页面缩短到没有它们的高度。这可能会导致您甚至没有滚动条。

编辑 2：还请注意，您可以（并且应该如果使用它）改进建议的更新实现，.delay()因为您无疑会遇到不必要的延迟。如果您不喜欢 A 计划（.promise().done()），则基本上是 B 计划；）

但是，如果您是 jQuery 新手，那么您可能会从改进 B 中学到比使用 A 更多的东西。

于 2012-08-31T18:30:09.953 回答
0 
if ( $(window).scrollTop() + $(window).height() > ( $(document).height() / 1.2 ) && document.documentElement.scrollHeight != document.documentElement.clientHeight ) {
                doit();

}
于 2012-08-31T15:35:40.693 回答