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

加载时,在窗口顶部下方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/

10-11 23:13
查看更多