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

Question

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

加载时，图像显示在 window 顶部下方 X 像素。当 window 滚动时，元素的不透明度应逐渐淡出，使其不透明度在不可见时为 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
    });
    */
});

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

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 在 window 未滚动时完全不透明，而 y2 在 window 滚动到 div.

Fiddle

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

Gradually change opacity based on offset

css

jquery

opacity