我怎樣才能整理這個簡短的javascript代碼？

Question

jsfiddle： http ： //jsfiddle.net/s1d368ce/

當用戶向下滾動頁面時，我試圖讓三個單獨的標題（h1，h2和h3）淡出。 我希望每個標題的淡出比上面的標題略慢，所以我的代碼有三個部分，如下所示。 然而，只有最后一位工作（即h3淡出，但h2和h1沒有。如果我刪除h3的最后一節，那么h2淡出但h1沒有。如果我刪除h3和h2 javascript然后h1淡出。）

我想知道是否有人可以告訴我如何重新組織代碼以使其有效？

請參閱我的代碼演示; 只有h3的代碼才有效。 但是，如果我要刪除javascript代碼的'scroll-fade-long-2'部分，那么h2會淡出，但不是h1。 ??

非常感謝！

 jQuery(function($){ //Scroll fade var divs = $('.scroll-fade'); $(window).on('scroll', function() { var st = $(this).scrollTop(); divs.css({ 'margin-top' : -(st/3)+"px", 'opacity' : 1 - st/135 }); }); //Scroll fade long var divs = $('.scroll-fade-long'); $(window).on('scroll', function() { var st = $(this).scrollTop(); divs.css({ 'margin-top' : -(st/3)+"px", 'opacity' : 1 - st/255 }); }); //Scroll fade long2 var divs = $('.scroll-fade-long-2'); $(window).on('scroll', function() { var st = $(this).scrollTop(); divs.css({ 'margin-top' : -(st/3)+"px", 'opacity' : 1 - st/355 }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h1 class="scroll-fade">header 1</h1> <h2 class="scroll-fade-long">header 2</h2> <h3 class="scroll-fade-long-2">header 3</h3> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 

Answer 1

我的演示編輯：更新了不透明度。 做了快速復制粘貼。 作品。

你只需要調用$(window).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的緊湊型解決方案： http ： //jsfiddle.net/ocntm9tx/5/

$(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"
        });
    }
});