javascript - 基于绝对 div 内滚动位置的动画元素，溢出 : scroll

Question

我正在尝试根据属性 position: absolute 和 overflow: scroll 的 div 内的滚动位置为元素设置动画。到目前为止我得到的代码是基于页面位置的位置动画，并改变不透明度。我想更改属性 filter: blur(value); 下面是现在存在的代码(不透明度，而不是基于 div 的滚动):

  var header = $('div.modal-container figure.still');
  var range = 200;

  $(window).on('scroll', function() {

    var scrollTop = $(this).scrollTop(),
      height = header.outerHeight(),
      offset = height / 2,
      calc = 1 - (scrollTop - offset + range) / range;

    header.css({
      'opacity': calc
    });

    if (calc > '1') {
      header.css({
        'opacity': 1
      });
    } else if (calc < '0') {
      header.css({
        'opacity': 0
      });
    }

  });

对我如何完成这个有什么帮助吗？

Answer 1

如果您在 calc 中有以像素为单位的可变模糊半径，请尝试如下操作:

header.css({
  'filter': `blur(${calc}px)`
});

if (calc < 0) {
  header.css({
    'filter': 'none'
  });
}