jquery - 如何在向下滚动时使 HTML 文本淡入淡出

Question

所以我的问题是我想创建一个在用户向下滚动时消失的标题，就像在以下网站上一样。

http://demos.themetrust.com/hero/

我在这里找到了一些可能有效的代码，但我也对 Jquery 的工作原理感兴趣(我是 Jquery 的新手)，有人可以告诉我这段代码是否可以在这种情况下工作，作为奖励你可以吗简要概述如何它是如何工作的？谢谢你的麻烦。

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

Answer 1

 jQuery(function($) {
    var divs = $('.fade');   //this selects the divs of class 'fade' (multiple)
    $(window).on('scroll', function() {   //this selects the window and attaches to the scroll event.  when scroll occurs, the inline function is called
        var st = $(this).scrollTop();   //gets the vertical position of the current element
        divs.css({ //this changes the css of the divs from before (specifically margin-top and opacity
            'margin-top' : -(st/3)+"px",
            'opacity' : 1 - st/35
        }); 
    });
});

内联解释，希望对你有帮助