内容根据滚动位置淡入淡出

Question

我设置了以下功能，根据某些内容与页面顶部/底部的接近程度淡出/淡入某些内容。如果您单击顶部的“关于”链接，所需的效果是非常明显且明显的，但如果您使用“工作”按钮向下滚动，内容只会在正确的位置弹出，但不会像顶部那样发生淡出.

我确信它与我创建的scrollBottom等效项有关，但不确定如何解决这个问题

 $(window).load(function(){
        $(window).scroll(function() {
        var st = $(window).scrollTop();
        var sb = $(document).height() - $(window).height() - $(window).scrollTop();
        $('#about .content').css({'opacity' : (1 - st/450)});
        $('#work .content').css({'opacity' : (450 + sb*-1)});
        
        $('#home .content').css({'opacity' : (-(450 + sb*-1))});
        $('#home .content').css({'opacity' : (-(1 - st/450))});
        });
    });

Answer 1

在我的浏览器中，您的页面加载的文档高度为 2892，窗口高度为 952。将这些尺寸代入方程中，#work 的不透明度从 -1478 到 450 不等。这使得它在窗口打开时开始显示。距离底部 450 像素，当窗口距离底部 451 像素时完全淡入 - 可能比您预期的要快一点。

如果您将工作线更改为

$('#work .content').css({'opacity' : ((450 + sb*-1)/450)});

那么你的不透明度将从 -3.28 到 1 变化，当窗口从底部滚动到 450px 时，越过 0 并开始淡入，当窗口一直向下滚动时达到 1.00（100% 淡入）。