0

我设置了以下功能，以根据其与页面顶部/底部的接近程度淡出/淡入某些内容。如果您单击顶部的 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))});
        });
    });
4

1 回答 1

1

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

如果您将工作线更改为

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

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

于 2013-06-12T06:17:48.573 回答