Question

我来到了下面的小提琴，当元素到达顶部时，元素逐渐淡出文档。

执行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/

只有这个在整个窗口上工作，我希望它能在div标签上工作。所以我修改了小提琴，在那里添加div测试和所有其他div，然后修改javascript来抓取div而不是窗口：

$("#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减去div的高度（100px）和div之间的空格（也就是100px），每个div（以及它周围的空间）总共有200px。

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

$("#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

.offset（）方法允许我们检索元素相对于文档的当前位置。

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

尝试使用.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 3

尝试在计算中使用div顶部而不是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 4

以下是jsfiddle示例。

你只需要改变条件从

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

要

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

$（＆＃34;＃测试＆＃34）。偏移（）顶是决定何时进行淡入淡出动作的高度现在这是容器的顶部 #test 。

div淡出内部div元素

4 个答案: