逐渐根据偏移更改不透明度

Question

许多类似的主题但似乎都没有帮助。我遇到了一个相当简单的算术问题，但我似乎无法弄明白。

加载时，图像显示在窗口顶部下方X像素处。当窗口滚动时，元素的不透明度应逐渐淡出，使其不透明度在它看不见的瞬间{（1}}（即其偏移量<0）。当然，当用户向后滚动时，它应该逐渐淡入。

以下是a fiddle。

0

元素的不透明度因此由元素到窗口顶部的距离定义。

Answer 1

这应该这样做：

$(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