滚动时的渐变效果-给定的代码是什么意思

Question

我正在创建一个致敬页面，我想在滚动上创建一个渐变效果。我在网上搜索了一下，找到了这段代码。这是一种享受，但我想知道这到底意味着什么。

$(window).on("load",function() {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(".fade").each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();

/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css("opacity")==0) {$(this).fadeTo(2500,1);}
} else { //object goes out of view (scrolling up)
if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});

Answer 1

我试图解释代码中缺少注释的部分。现在对每一行进行解释。

// When window loads
$(window).on("load",function() {
// attach scroll event to invoke
$(window).scroll(function() {
// get the bottom value using the total height and window scrollTop position
// usually on first load it will be 0 + total height which is bottom.
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
// on each element that has fade class
$(".fade").each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();

/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
// if opacity is already 0, make it 1 slowly [2500]
if ($(this).css("opacity")==0) {$(this).fadeTo(2500,1);}

} else { 
//object goes out of view (scrolling up)
if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});