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

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

0 голосов
/ 29 января 2019

Я ищу относительно простой и стандартный способ изменения значения свойства псевдоэлемента 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%); */
}
...