Question

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

我确定它与我创建的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.这使得它开始显示在窗口距离底部450px，当窗口距离底部451px时完全消失 - 可能比你想象的快一点。

如果您将工作线更改为

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

然后你的不透明度将从-3.28变为1，越过0并且当窗口从底部滚动到450px时开始淡入，当窗口完全向下滚动时达到1.00（淡入淡出100％）。

内容根据滚动位置淡化

1 个答案: