Анимировать элемент на основе позиции прокрутки внутри абсолютного div с переполнением: scroll

Question

Я пытаюсь анимировать элемент на основе позиции прокрутки внутри элемента div со свойствами position: absolute и overflow: scroll. Код, который я получил до сих пор, основывает анимацию на основе позиции на позиции страницы и изменяет непрозрачность. Я хочу изменить свойство 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'
  });
}