jquery - 根据偏移量逐渐改变不透明度

Question

很多类似的主题，但没有一个似乎有帮助。我面临一个相当简单的算术问题，但我似乎无法解决。

加载时，图像显示在窗口顶部下方 X 像素。当窗口滚动时，元素的不透明度应逐渐淡出，以便它的不透明度为 0 在它看不见的那一刻(即它的偏移量 < 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
    });
    */
});

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

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