Javascript 基于绝对div内的滚动位置设置元素动画，溢出：滚动

我正在尝试根据div中的滚动位置设置元素动画，属性为

position:absolute

和

overflow:scroll

。到目前为止，我得到的代码是基于页面位置的动画，并更改不透明度。我想更改属性

filter:blur（值）
  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
      });
    }

  });

var header=$（'div.modal-container-figure.still'）；
var范围=200；
$（窗口）.on（'scroll'，function（）{
var scrollTop=$（this）.scrollTop（），
高度=收割台。外部高度（），
偏移=高度/2，
计算=1-（滚动顶部-偏移+范围）/范围；
header.css({
“不透明度”：计算
});
如果（计算>'1'）{
header.css({
“不透明度”：1
});
}否则如果（计算<'0'）{
header.css({
“不透明度”：0
});
}
});

有没有人能帮我完成这个任务
 如果在
calc
中有以像素为单位的可变模糊半径，请尝试以下操作：

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

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

header.css({
'filter'：`blur（${calc}px）`
});
如果（计算值<0）{
header.css({
“筛选器”：“无”
});
}
如果在
计算中有以像素为单位的可变模糊半径，请尝试以下操作：

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

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

header.css({
'filter'：`blur（${calc}px）`
});
如果（计算值<0）{
header.css({
“筛选器”：“无”
});
}
这对模糊效果很好，但它不能解释带有滚动溢出的绝对div的滚动位置。这对模糊效果很好，但不能解释带有滚动溢出的绝对div的滚动位置。