Question

我正在使用这个jQuery插件One Page Scroll，我想知道如何确定不同页面中的元素在屏幕上可见时淡入？此外，它应该响应，因为我调整此插件以使用媒体查询。

我尝试添加fadeToggle afterMove，但它会显示所有元素。

我还发现插件会将active类添加到元素中。也许我可以针对这个？请帮忙，我是jQuery的新手

Answer 1

文档说明有一个名为“afterMove”的配置函数。

$('#main').onepage_scroll({
  afterMove: function(index){
    //do your fadeIn here.
    $('section').eq(index).children().fadeIn();
  }
});

Answer 2

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

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

这会捕获项目的scrollTop（顶部像素的整数值，您需要“向下滚动”以到达元素的顶部），然后滚动时将该数字与像素向下滚动。一旦向下滚动的值高于所需的数量，它将淡入项目，如果向上滚动（减少文档滚动值），它将淡出它。

我根据调整窗口大小更新了代码以重新填充$mainTop值，并对其进行了优化。应该可以工作，我实际上为我的粘性菜单设置做了这个确切的设置。

使元素在可见时淡入

2 个答案: