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

Question

很多类似的主题，但似乎没有任何帮助。我遇到了一个相当简单的算术问题，但我似乎无法弄清楚。

加载时，图像在窗口顶部下方显示 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
    });
    */
});

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

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