内容根据滚动位置淡出

Question

我已经设置了以下功能，根据其与页面顶部/底部的接近程度淡出/显示某些内容。 如果单击顶部的ABOUT链接，则所需的效果非常明显且显而易见，但是，如果使用WORK按钮向下滚动，则内容会在正确的位置弹出，但不会像顶部那样出现褪色。

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

http://coreytegeler.com/new

 $(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％）。