滚动时淡出div的顶部和底部

Question

我想帮助淡出滚动中div的顶部和底部。在阅读Fade only top part of div out as it reaches fixed navigation和Yoann的答案之后，我得到了顶部的淡入淡出工作，但是我无法弄清楚如何用底部来做这件事。

$(window).on('scroll', function () {
    $('.section').each(function (index, item) {
        $(item).children().each(function (indexChild, child) {
            var st = $(window).scrollTop();
            st = $(window).scrollTop() - $(child).offset().top + 10;
            $(child).css({ 'opacity': (1 - st / 20) });
        });

    });
});

Answer 1

创建一个css渐变，从白色（或任何背景颜色）到透明然后再回到白色。将您的容器包装在div中并使用jquery在必要时从div添加和删除css类。

Answer 2

这里是淡出div的一个方向，顶部或底部的方式：

-webkit-mask-image: linear-gradient(to top, black 90%, transparent 100%);

我也在寻找两者。多线性梯度不起作用。