许多类似的主题,但似乎没有帮助。我面临一个相当简单的算术问题,但似乎无法解决。
加载时,在窗口顶部下方X像素处显示图像。当窗口滚动时,元素的不透明度应逐渐淡出,以使它的不透明度在不可见的那一刻变为0
(即其偏移量
这是a fiddle一起玩。
$(window).scroll(function() {
// Simple example to show something similar
var d = $("div"),
offsetT = d.offset().top + d.outerHeight(),
scrollT = $(document).scrollTop();
if (offsetT <= scrollT) {
d.stop(true).fadeOut(1000);
} else {
d.stop(true).fadeIn(1000);
}
/* What I actually need:
d.css("opacity", function() {
// Some arithmetic magic
});
*/
});
因此,元素的不透明度由元素到窗口顶部的距离定义。
最佳答案
应该这样做:
$(window).scroll(function() {
var d = $('div'),
offsetT = d.offset().top + d.outerHeight(),
scrollT = $(document).scrollTop(),
y1 = 1, y2 = 0,
x1 = 0, x2 = offsetT,
m = (y2-y1)/(x2-x1);
d.css('opacity', Math.max(0,y1 + m * scrollT));
});
它基于直线的等式:
…其中,当不滚动窗口时,
y1
是完全不透明的;当窗口滚动到y2
的底部时,div
是不透明的。Fiddle
关于jquery - 根据偏移量逐渐更改不透明度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29498141/