I am attempting to target a parent element and a child element using an intersectionObserver, then I have a function changing the background of the parent to a different color and rotating the child element.
This code works on the parent div, however the child item returns as undefined. Am I unable to target child elements with querySelector, or is the intersectionObserver unable to observe more than one element?
let options = {
threshold: 0.25
}
let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
} else {
console.log(entry.target);
console.log(entry.sticky);
alert('INTERSECTING!');
entry.target.classList.toggle("red");
entry.sticky.classList.toggle("rotate");
}
});
}, options);
let target = document.querySelector('.placeholder__div__large');
let sticky = document.querySelector('.sticky__container');
observer.observe(target, sticky);.placeholder__div__large {
height: 200vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
color: white;
background: black;
transition: 2s;
}
.sticky__container {
position: sticky;
top: 100px;
width: 200px;
height: 200px;
}
.sticky__item {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: white;
color: black;
width: 100%;
height: 100%;
}
.red {
background: red;
transition: 2s;
}
.rotate {
transform: rotate(180deg);
}<div class="placeholder__div__large">
<div class="sticky__container">
<div class="sticky__item">STICKY ITEM</div>
</div>
</div>You can't observe multiple elements by passing them all to .observe, you have to call it multiple times.
Also, I assume you rather wanted to do it like this (I'm not sure if I'm right, but parts of your code didn't make any sense to me):
let options = {
threshold: 0.25
}
const observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
console.log('INTERSECTING with', entry.target, entry.isIntersecting);
entry.target.classList.toggle("intersect", entry.isIntersecting);
});
}, options);
const target = document.querySelector('.placeholder__div__large');
const sticky = document.querySelector('.sticky__container');
observer.observe(target);
observer.observe(sticky);.placeholder__div__large {
height: 200vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
color: white;
background: black;
transition: 2s;
}
.sticky__container {
position: sticky;
top: 100px;
width: 200px;
height: 200px;
}
.sticky__item {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: white;
color: black;
width: 100%;
height: 100%;
}
.red-whenintersect.intersect {
background: red;
transition: 2s;
}
.rotate-whenintersect.intersect {
transform: rotate(180deg);
}<div class="placeholder__div__large red-whenintersect">
<div class="sticky__container">
<div class="sticky__item rotate-whenintersect">STICKY ITEM</div>
</div>
</div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments