javascript – Just how to include colour to sticky photo scroll areas

I am a novice and also I am attempting to recreate a sticky photo swap scroll result comparable to what apple carries their site.

https://www.apple.com/apple-tv-4k/

Presently, I have the scroll result, nevertheless, I intend to include colours per area. What is the very best technique to do this? Value any kind of aid, many thanks.

https://jsfiddle.net/q6kzLcy8/

<< div course=" storage locker">
<> < div course=" storage locker __ photo">
<> < div course=" storage locker __ container">
<> < img course=" photo photo-- 1" src=" https://assets.codepen.io/325536/placeimg_480_720_tech.jpg">
<> < img course=" photo photo-- 2" src=" https://assets.codepen.io/325536/tech.jpeg">
<> < img course=" photo photo-- 3" src=" https://assets.codepen.io/325536/tech-2.jpeg">
<> < img course=" photo photo-- 4" src=" https://assets.codepen.io/325536/tech-3.jpeg">
<> .
<.

<< div course=" storage locker __ material">
<> < div course=" storage locker __ area storage locker __ area-- 1 cb" data-swap=" photo-- 1">
<> < h3>> 01<.
<< p>> Lorem ipsum<.
<.
<< div course=" storage locker __ area storage locker __ area-- 2 cb" data-swap=" photo-- 2">
<> < h3>> 02<.
<< p course="">> Lorem ipsum<.
<.
<< div course=" storage locker __ area storage locker __ area-- 3 cb" data-swap=" photo-- 3">
<> < h3>> 03<.
<< p>> Lorem ipsum <.
<.
<< div course=" storage locker __ area storage locker __ area-- 4 cb" data-swap=" photo-- 4">
<> < h3>> 04<.
<< p>> Lorem ipsum<.
<.
<.
<.

 limit {
placement: sticky;
size: 100%;
elevation: 1px;
background-color: red;
z-index: 9999999999;
&&-- leading {
top: 50%;}
}
. photo {opacity: 0; shift: all
.5 s simplicity; &.
energetic {
opacity: 1;}
}
. storage locker {
summary: 1px strong #cdcdcd; outline-offset: -1 px;

&placement: loved one;
display screen: grid;
grid-template-columns: 1fr 1fr; & __ photo {
placement: loved one;
img {
size: automobile;

elevation: 70vh; placement: outright;.

shift: all 1sts simplicity;.
background-color: red;

.
&}
}
. photo-- 1 {
background-color: red;
.
}
& __ container {placement: sticky;

.

&placement:- webkit-sticky;. top: 0;.
elevation: 100vh;
.
display screen: flex;. align-items: facility;
. justify-content: facility;.}

&& __ area {
elevation: 100vh;

.
display screen: flex;.
justify-content: facility;
.
flex-direction: column;.
border-top: 1px strong #cdcdcd;.

&: first-child {boundary: none;.} p {size: 70 %;.}
}
}

 if( typeof window.IntersectionObserver!==' undefined'
) {allow choices= {limit:[0.5, 1]
} const targets= document.querySelectorAll('. cb');. const storage locker= document.querySelector('. storage locker __ container')
;. feature handleIntersection (access) {entries.map(( access) => {
if( entry.isIntersecting) {entry.target.current=
entry.target.dataset.swap;. document.querySelector(". storage locker __ container."+ entry.target.current ).
classList.add(" energetic");.} else {document.querySelector(". storage locker __ container." + entry.target.current).
classList.remove( "energetic");.
}}
);.} const onlooker =brand-new IntersectionObserver( handleIntersection, choices);. targets.forEach( target= > observer.observe (> target));.}
else {
// Alternative.
}