逐渐淡化元素的顶部仅在没有固定背景的滚动上

Question

不确定这是否可能，但我要做的是在内容到达标题时淡出内容。

我见过这样的解决方案：

    // fade content out at top of div before it reaches LD icon and nav
    $('.content-block *').each(function (index, item) {
        $(item).children().each(function (indexChild, child) {
            var st = $(window).scrollTop() - $(child).offset().top + 115;
            console.log('st: '+st);
            $(child).css({ 'opacity': (1 - st / 1.1) }); // changing the / 1.1 supposedly changes the intensity of the effect
        });

    });

但是这会导致内容块在移动设备上过早淡出。例如，内容块的顶部将到达屏幕顶部，因此淡出，但底部尚未显示，因此他们永远不会有机会阅读所有内容。

我正在逐渐淡出，好像我们有一个渐变的PNG图像叠加层。但是，我正在尝试找到一个不需要固定背景的解决方案，因为我正在尝试在实时视频背景下执行此操作。