Можно ли изменить липкий элемент после того как он перешел в это состояние?

Question

[Алексей Коновалов]

Всем привет!
Пытаюсь понять работу position: sticky. Оно конечно все понятно, но при условии, что в пока элемент стоит на своем месте, он должен быть прозрачным, как только он поехал вместе со скролом вниз - должен получить некий цвет.
Если бы дело касалось шапки страницы, то тут все просто. Я бы с помощью js проверял бы позицию скрола и если она больше 1 то задавал бы значение background для элемента header. Но как быть, когда неизвестно, где будет находиться элемент. Например такой случай:
https://jsfiddle.net/cokupf83/
Может есть какое-то условие или медиазапрос, о котором я не знаю?

Comments

[Rustam Bainazarov]

Нет, только на JS следить за состоянием.

Можно, если что, воспользоваться вот этим плагином:
https://dollarshaveclub.github.io/stickybits/

Помимо классов состояния, он ещё умеет, если нет поддержки sticky у браузера, вешать элемент на fixed для имитации sticky.

Answer 1

[WapSter]

const stickyEl = document.querySelector('.sticky');

window.addEventListener('scroll', e => {
	let corSticky = stickyEl.getBoundingClientRect().top;
  corSticky <= 0 ? stickyEl.style.backgroundColor = 'red' : stickyEl.style.backgroundColor = 'yellow'
});

Примерно так