«Активируемая» тень на липких элементах

TL; DR результат

Представьте, что у вас есть два вертикально перекрывающихся элемента, где верхний элемент прилипает, а единственный нижний элемент прокручивается.

С CSS3 единственный код, который нам нужен для достижения вышеуказанного эффекта, - это 2 строки CSS:

position: sticky;
top: 0;

Все, что делает sticky позиционирование, это переключение между relative и fixed позиционированием для достижения эффекта «прилипания» элемента к смещению, которое вы указываете с помощью top, bottom, left и right.

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

  • Когда они начинают прокрутку, отсутствие видимого разделителя затрудняет определение, где перекрывающееся содержимое встречается с перекрывающимся содержимым.

Конечно, это выглядит намного лучше с простой падающей тенью:

Выглядит неплохо, правда?

Тень выглядит хорошо, когда контент на самом деле перекрывается, но она выглядит неудобно в исходном состоянии покоя, когда на самом деле ничего не перекрывается.

В идеале мы не должны показывать тень в исходном состоянии, а показывать ее только тогда, когда пользователь начал прокрутку. К сожалению, нет события или псевдоэлемента, который срабатывает, когда липкий элемент меняется между относительным и фиксированным положением.

Результаты поиска довольно обескураживают, и самый полезный пост от разработчика, в котором говорится, что вам следует использовать IntersectionObserver API.

API-интерфейс Intersection Observer обеспечивает способ асинхронного наблюдения за изменениями пересечения целевого элемента с элементом-предком или с окном просмотра документа верхнего уровня.

. . . 🙃

Но ваш UX рассчитывает, что вы включите эту функцию в MVP.
Чем вы занимаетесь?

Нет, погоди! Есть способ сделать это с помощью CSS.

Все, что вам нужно сделать, это создать элемент, который изначально «покрывает» тень, и когда пользователь прокручивает вниз, он начинает раскрывать тень.

Когда пользователь прокручивает страницу вниз, теневой элемент не перемещается, потому что он «прилипает» к своему текущему положению, а крышка перемещается вверх, постепенно «открывая» теневой элемент.

…

Наслаждайтесь еще одним красивым хаком