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
        }); 
    });
});

内联解释，希望有所帮助

向下滚动时如何使HTML文本淡出

1 个答案: