基于滚动位置的内容淡入淡出答案

【问题标题】：Content fade based on scroll position基于滚动位置的内容淡入淡出
【发布时间】：2013-06-12 01:20:50
【问题描述】：

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

我确定它与我创建的 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))});
        });
    });

【问题讨论】：

标签： javascript jquery opacity scrolltop

【解决方案1】：

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

如果你把工作线改成

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

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

【讨论】：