我怎样才能整理这个简短的 javascript 代码？

Question

我试图让三个单独的 headers（h1、h2 和 h3）在用户向下滚动页面时淡出。我希望每个 header 的淡出速度都比上面的稍微慢一些，所以我的代码分为三个部分，如下所示。但是，只有最后一位有效（即 h3 淡出，但 h2 和 h1 不淡出。如果我删除 h3 的最后一部分，则 h2 淡出但 h1 不淡出。如果我删除 h3 和 h2 javascript 然后 h1 淡出。）

我想知道是否有人可以告诉我如何 re-organize 代码使其工作？

请看我的代码演示；只有 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

My demo 编辑：更新了不透明度。快速复制粘贴。有效。

您只需调用 $(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"
    });
});

另请参阅米罗的紧凑解决方案：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"
        });
    }
});

我怎样才能整理这个简短的 javascript 代码？

How can I tidy up this short javascript code?

javascript

jquery

scroll

fade

parallax