Jquery 使元素在可见时淡入

我正在使用这个jQuery插件，我想知道如何确定不同页面中的元素在屏幕上可见时淡入？此外，它应该是响应，因为我适应了这个插件与媒体查询工作

我曾尝试添加fadeToggle

afterMove

，但它显示了所有元素

---

我还发现插件将

active

类添加到元素中。也许我可以瞄准这个？请帮助，我是jQuery的新手，文档中说明有一个名为“afterMove”的配置函数

---

获取窗口高度，然后滚动确定是否在“窗口内”：

这将捕获项目的

scrollTop

（从顶部开始需要“向下滚动”才能到达元素顶部的像素的整数值），然后在滚动时将该数字与向下滚动的像素量进行比较。一旦向下滚动的值高于所需的数量，它将在项目中淡出，如果您向上滚动（减小文档滚动值），它将淡出

---

我更新了代码，根据窗口的大小重新填充

$mainTop

值，并对其进行了一些优化。不过应该可以工作，我为我的粘滞菜单设置做了几乎完全相同的设置。

看起来该插件在移动后进行了

回调，您可以在其中淡入元素。是的，但是我如何定义何时进入该页面？我曾尝试使用css显示：无，然后fadetoggle，但结果是，当第一页更改时，所有元素都会显示它传递给回调的索引。请编辑问题，并提供您迄今为止尝试的详细信息。不起作用。同时显示所有页面。我需要一个特定的显示时，滚动到该页。正确使用索引。在afterMove中，$（'section'）.eq（index）.find（'alltheelementsyouwanttotrigger'）.fadeIn（）；我应该在索引中写什么？我试图增加页数，但没有成功。谢谢，它可以工作，但我必须向元素添加
style=“display:none”
，才能使其正常工作，我可以添加一个类吗？我更新了上面的代码。索引是在AfterMove中填写的参数，因此它应该是当前查看的索引。您能给我一个示例吗？我试图将其应用于
.main
，但没有效果。@ArturasStrazdas更新了我的代码和答案，希望能提供更好的解释。
$('#main').onepage_scroll({
  afterMove: function(index){
    //do your fadeIn here.
    $('section').eq(index).children().fadeIn();
  }
});

$(function(){
    var $item = $('.itemToShow'),
        $mainTop = $('.main').scrollTop();

    $(window).on({
        scroll:function(){
            if($(document).scrollTop() >= $mainTop){
                $item.fadeIn(300);
            } else {
                $item.fadeOut(300);
            }
        },
        resize:function(){
            $itemTop = $item.scrollTop();
        }
    });
});