如何整理这段简短的javascript代码？

jsfiddle：

当用户向下滚动页面时，我试图让三个单独的标题（h1、h2和h3）淡出。我希望每个标题的淡出速度比上面的稍慢，因此我的代码有三个部分，如下所示。但是，只有最后一位起作用（即h3淡出，但h2和h1不起作用。如果删除h3的最后一部分，则h2淡出，但h1不起作用。如果删除h3和h2 javascript，则h1淡出。）

我想知道是否有人可以告诉我如何重新组织代码，使其工作

请看我的代码演示；只有h3的代码有效。但是，如果我删除javascript代码中的“scroll-fade-long-2”部分，那么h2将淡出，而不是h1

非常感谢你

jQuery（函数（$）{
//滚动淡入
var divs=$（'.scroll fade'）；
$（窗口）.on（'scroll'，function（）{
var st=$（this.scrollTop（）；
css（{
“页边顶部”：（st/3）+“px”，
“不透明度”：1-st/135
}); 
});
//滚动淡出长
var divs=$（'.scroll fade long'）；
$（窗口）.on（'scroll'，function（）{
var st=$（this.scrollTop（）；
css（{
“页边顶部”：（st/3）+“px”，
“不透明度”：1-st/255
}); 
});
//滚动淡出长2
var divs=$（'.scroll-fade-long-2'）；
$（窗口）.on（'scroll'，function（）{
var st=$（this.scrollTop（）；
css（{
“页边顶部”：（st/3）+“px”，
“不透明度”：1-st/355
}); 
});
});

标题1
标题2
标题3












































编辑：更新不透明度。做了一个快速复制粘贴。工作

您只需要调用
$（窗口）.on（'scroll'，function（）{}）一次

var sf = $('.scroll-fade');
var sfl = $('.scroll-fade-long');
var sfl2 = $('.scroll-fade-long-2');

$(window).on('scroll', function(){
    var st = $(this).scrollTop();
    sf.css({
        'opacity' : 1 - st/135,
        'margin-top': -(st/3)+"px"
    });
    sfl.css({
        'opacity' : 1 - st/255,
        'margin-top': -(st/3)+"px"
    });
    sfl2.css({
        'opacity' : 1 - st/355,
        'margin-top': -(st/3)+"px"
    });
});

另请参见Miro的紧凑型解决方案：

$（窗口）.on（'scroll'，function（）{
var st=$（this.scrollTop（）；
对于（i=1；它实际上没有OP代码那么有效。因为
scroll
事件每秒发生很多次；以OP的方式缓存集合的性能要高得多，因为它不需要所有不必要的DOM搜索。我并没有试图提高效率。“请看我的代码演示；只有h3的代码有效。但是，如果我删除javascript代码中的‘scroll-fade-long-2’部分，那么h2将淡出，而不是h1。”？？“刚刚回答了他的问题。只是指出它可以大大提高性能，并不是一个可靠的答案。我重新表述一下，它没有OP的方法那么有效。毫无疑问，现在唯一的问题是将现有的jQuery对象包装在
$（）
中是多余的。只需执行
sf1.css即可。”（…
根据@Grimbode的答案，这里有一个更简洁的版本：
$(window).on('scroll', function(){
    var st = $(this).scrollTop();
    for(i=1; i<=3; i++){
        $('.scroll-fade-'+i).css({
            'opacity' : 1 - st/(i*100),
            'margin-top': -(st/3)+"px"
        });
    }
});