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

How can I tidy up this short javascript code?

本文关键字：javascript 代码 段简短 何整理      更新时间：2024-06-20

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>

我的演示编辑：更新了不透明度。快速复制粘贴。作品

您只需要调用$(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"
        });
    }
});
相关文章：