div 淡出内部 div 元素

Question

我遇到了以下 fiddle，它让元素在到达顶部时逐一淡出文档。

通过执行javascript:

$(window).scroll(function () {
    $('[id^="box"]').each(function () {
        if (($(this).offset().top - $(window).scrollTop()) < 20) {
            $(this).stop().fadeTo(100, 0);
        } else {
            $(this).stop().fadeTo('fast', 1);
        }
    });
});

http://jsfiddle.net/JdbhV/6/

只有它适用于完整的 window，我希望它适用于 div 标签。所以我修改了 fiddle 以添加 div 测试和其中的所有其他 divs，然后修改 javascript 以获取 div 而不是 window:

$("#test").scroll(function () {
    $('[id^="box"]').each(function () {
        if (($(this).offset().top - $("#test").scrollTop()) < 20) {
            $(this).stop().fadeTo(100, 0);
        } else {
            $(this).stop().fadeTo('fast', 1);
        }
    });
});

http://jsfiddle.net/JdbhV/1692/

但是现在它们褪色的速度太快了，当它们到达 div 的顶部时就不会褪色了。

有人知道这里出了什么问题吗？

Answer 1

原因是 jQuery 将 div 变为透明。然而 div 仍然存在，这意味着他们的身高仍然重要。

因此，特别是对于这种情况，您唯一需要做的就是减法。使用 20 减去 divs 的高度（即 100px）和 divs 之间的 spaces（也是 100px），每个 [=19= 总共有 200px ]（及其周围的 space）。

试试下面的代码，看看它是否有效。

$("#test").scroll(function () {
    $('[id^="box"]').each(function () {
        if (($(this).offset().top - $("#test").scrollTop()) < 20 - $(this).index() * 200) {
            $(this).stop().fadeTo(100, 0);
        } else {
            $(this).stop().fadeTo('fast', 1);
        }
    });
});

祝你好运。

Answer 2

尝试在计算中使用 div top 而不是 scrollTop。

我更改了这一行的计算：

if (($(this).offset().top - $("#test").offset().top) < 20) {

JSFIDDLE : http://jsfiddle.net/JdbhV/1697/

$("#test").scroll(function () {
    $('[id^="box"]').each(function () {
          if (($(this).offset().top - $("#test").offset().top) < 20) {
            $(this).stop().fadeTo(100, 0);
        } else {
            $(this).stop().fadeTo('fast', 1);
        }
    });
});

Answer 3

The .offset() method allows us to retrieve the current position of an element relative to the document.

滚动 window 不会更改元素在文档中的位置，但是在另一个元素内滚动元素会。这会导致偏移位置发生变化，从而导致检查框是否位于滚动视图的顶部。

尝试使用 .position() 方法获取相对于父级的位置。

$("#test").scroll(function () {
    $('[id^="box"]').each(function () {
            //When the top of the square goes above the top of the scroll element, fade it out
        if ($(this).position().top < 0) {
            $(this).stop().fadeTo(100, 0);
        } else {
            $(this).stop().fadeTo('fast', 1);
        }
    });
});

http://jsfiddle.net/ys0m6axL/

Answer 4

这是 jsfiddle 示例。

你只需要改变条件来自

$(this).offset().top - $("#test").scrollTop()) < 20

到

$(this).offset().top < $("#test").offset().top

$("#test").offset().top 是确定何时执行淡入淡出操作的高度。
现在这是容器的顶部 #test.

div 淡出内部 div 元素

div fade out inner div elements

javascript

jquery

css

fade