Как изменить значение свойства псевдоэлемента CSS с помощью JavaScript в scrollspy?

Question

Я ищу относительно простой и стандартный способ изменения значения свойства псевдоэлемента CSS с помощью JS Scrollspy. Родительский элемент (раздел целевой страницы) должен изменять градации серого во время прокрутки, а его дочерний элемент должен иметь position:fixed.

Оказывается, это невозможно сделать простым способом, потому что любой фильтр удаляет position:fixed по определению. Подробнее об этом: CSS-фильтр на родительских элементах нарушает позиционирование дочерних элементов

Перемещение этого фонового изображения в псевдоэлемент создает другую проблему: манипулирование свойствами псевдоэлемента с помощью JS.

Ожидаемый результат: я хотел создать раздел целевой страницы с фильтром серого для фонового изображения. Это легкая часть. Но он должен иметь меньшую градацию серого при перемещении вверх (чем больше пользователь видит изображения, тем больше цвета), а центрированный элемент содержимого перемещается вверх из предыдущего раздела, а затем скрывается под следующим. В общем, мне нужны две вещи:

1. фильтровать фоновое изображение в градациях серого с динамически изменяющимся значением градаций серого относительно расстояния до верхней части окна (JS scrollspy)
2. position: фиксированный центральный элемент контента, видимый только в этом разделе

Иллюстрация (с фоновым рисунком в псевдоэлементе) находится здесь: https://codepen.io/tdudkowski/pen/MLyMyG

HTML

<section class="one">
</section>
<section class="two">
  <div><p>DIV with a position:fixed</p></div>
</section>
<section class="three"></section>

CSS

 section {
 position: relative;
 max-width: 1000px;
 height: 70vh;
 background-color: #eee;
 margin: 0 auto;
 overflow: hidden;
}

.two {
 background-color: transparent;
 /* Try to uncomment rule below */
/*  filter: grayscale(50%); */
}

.two div {
 position: fixed;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 width: 30rem;
 height: 10rem;
 background-color: #f00;
 z-index: 1;
}

.one,
.three {
 z-index: 100;
}

/* background of section */

section.two::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 background-image: url(https://picsum.photos/1000/200);
 background-size: cover;
 background-repeat: no-repeat;
 z-index: -1; 
/*   filter: grayscale(50%); */
}