Javascript div淡出内部div元素

我碰到了下面的小提琴，它让元素在到达顶部时从文档中一个一个地淡出

通过执行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);
        }
    });
});

$（窗口）。滚动（函数（）{
$（'[id^=“box”]'）。每个（函数（）{
if（$（this.offset（）.top-$（window.scrollTop（））<20）{
$（this.stop（）.fadeTo（100,0）；
}否则{
$（this.stop（）.fadeTo（'fast'，1）；
}
});
});

只有这是对整个窗口的工作，我希望它对一个div标签的工作。因此，我修改了fiddle以添加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);
        }
    });
});

$（“#测试”）。滚动（函数（）{
$（'[id^=“box”]'）。每个（函数（）{
if（$（this.offset（）.top-$（“#test”）.scrollTop（））<20）{
$（this.stop（）.fadeTo（100,0）；
}否则{
$（this.stop（）.fadeTo（'fast'，1）；
}
});
});

但现在它们褪色太快了，当它们到达div的顶端时就消失了

---

有人有指针吗？这里出了什么问题？

原因是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);
        }
    });
});

$（“#测试”）。滚动（函数（）{
$（'[id^=“box”]'）。每个（函数（）{
if（$（this.offset（）.top-$（“#test”）.scrollTop（））<20-$（this.index（）*200）{
$（this.stop（）.fadeTo（100,0）；
}否则{
$（this.stop（）.fadeTo（'fast'，1）；
}
});
});

---

祝你好运。

尝试在计算中使用

div

top而不是

scrollTop

我更改了这一行的计算：

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

if（$（this.offset（）.top-$（“#test”）.offset（）.top）<20）{

JSFIDDLE：

$（“#测试”）。滚动（函数（）{
$（'[id^=“box”]'）。每个（函数（）{
如果（$（this.offset（）.top-$（“#test”）.offset（）.top）<20）{
$（this.stop（）.fadeTo（100,0）；
}否则{
$（this.stop（）.fadeTo（'fast'，1）；
}
});
});

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

滚动窗口不会改变文档中元素的位置，但是滚动另一个元素中的元素会改变位置。这会导致偏移位置改变，从而取消检查框是否位于滚动视图的顶部

尝试使用获取相对于父对象的位置的方法

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

$（“#测试”）。滚动（函数（）{
$（'[id^=“box”]'）。每个（函数（）{
//当正方形的顶部超过滚动元素的顶部时，将其淡出
if（$（this）.position（）.top<0）{
$（this.stop（）.fadeTo（100,0）；
}否则{
$（this.stop（）.fadeTo（'fast'，1）；
}
});
});

以下是示例

你只需要改变条件 从

$（this.offset（）.top-$（“#测试”）.scrollTop（））<20

到

$（this）.offset（）.top<$（“#测试”）.offset（）.top

$（“#测试”）.offset（）.top 确定何时进行淡入淡出动作的高度。
目前，这是容器测试的顶部

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

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

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