Witam, mam pewną zagwozdkę.
Powiedzmy, że mam sticky menu, które zawsze jest widoczne i chcę zmieniać jego style w zależności od tego, nad jakim elementem się znajduje podczas scrollowania.
Czy podpowie ktoś/poda przydatne narzędzia/funkcje do tego? Chodzi mi o czystego JS'a, bo na necie jest tego masa ale odnośnie JQ.
Do wykrywania widoczności elementów na stronie najlepiej skorzystać z obiektu IntersectionObserver
Tutaj znalazłem przykład jak zrobić takie proste menu, o którym mówisz:
https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/
Faktycznie IntersectionObserver da się to zrobić - trochę szkoda, że trzeba dodawać specjalnie dla każdej sekcji zmienną (data-section), inaczej ciężko wybadać jaki background ma element pod sticky menu - po prostu bazujemy na tym, co sami ustawimy w zmiennej.
Ale i tak to rozwiązanie jest wystarczające jak na razie, z czasem pokombinuję dalej, dzięki :)
Dla potomnych:
w przedstawionym wyżej przykładzie musimy bazować na zmiennych (przy większych projektach może być to męczące) podpiętych do każdej sekcji np:
<section data-section="raspberry">
i wtedy łapiemy kolorek w ten sposób oraz podpinamy pod dany atrybut:
const theme = target.dataset.section
header.setAttribute('data-theme', theme)
Ja natomiast pobrałem bg color z sekcji w taki sposób:
const elementBackgroundColor = window.getComputedStyle(target).backgroundColor;
Wtedy bezpośrednio dostaję kolor w rgb i w zależności od tego jaki kolor dostanę, mogę podpiąć odpowiednią klasę.