I need to add .your-active-class to all the sections to be able to change the color of the element in the viewport, it works on the first 2 elements and ignore the third if i scroll up it work with the second section only and stop work can some one tell me what is the wrong on my code it's very small I will share it here I tried many ways to reach this point but still strange action from my code
I added <br> to make it small post but my project have large text
<!DOCTYPE html>
<html>
<style>
.your-active-class {
color: green;
}
</style>
<body onload="myFunction()">
<h2>Using a Relative File Path</h2>
<img src="/images/picture.jpg" alt="Mountain" style="width:300px">
<script>
function myFunction() {
myAllSections = document.querySelectorAll('.asection');
var observer = new IntersectionObserver(function(entries) {
// isIntersecting is true when element and viewport are overlapping
// isIntersecting is false when element and viewport don't overlap
/*clear any active */
for (let i=0; i < myAllSections.length; i++) {
myAllSections[i].classList.remove('your-active-class');
}
if(entries[0].isIntersecting === true)
entries[0].target.classList.add('your-active-class');
}, { threshold: [0] });
/* I used this insted of for loop to not repeat the function it self*/
var targets = [Array.from(document.querySelectorAll('.asection')), Array.from(document.querySelectorAll('.asection'))].flat();
targets.forEach(target =>
observer.observe(target));
}
</script>
</body>
<div class="menu__link">
<div class="asection" id="demo" data-link="item1">All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All :</div>
<br><br><br><br><br><br>
<div class="asection" id="demo2" data-link="item2">All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern the background-color along with different text colors):</div>
<br><br><br><br><br><br><br><br>
<div class="asection" id="demo3" data-link="item3">All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the backg different text colors):</div>
</div>
</html>
can some one only tell me which part has the problem and I will try to work on fix it sorry it's my first time using this API I read it's good for performance so can some one help me please
Please I reached this part but removeing class not work add only work why
<!DOCTYPE html>
<html>
<head>
<style>
.active {
color: green;
background-color: black;
}
</style>
</head>
<body>
<p>Example list:</p>
<ul id="heros">
<li id="myLI">Coffee</li>
<li>Tea</li>
</ul>
<button onclick="">Try it</button>
<p class="mytarget">hello world</p>
<p>hello worldClick the button to get the node nameClick the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list. of the parent element of the li element in the list.</p>
<p class="mytarget">hello world</p>
<p>Click the button to get the node nameClick the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list.Click the button to get the node name of the parent element of the li element in the list. of the parent element of the li element in the list.</p>
<p class="mytarget">hello world</p>
<p id="demo"></p>
<script>
document.body.onscroll = function() {myScript()};
function myScript () {
let x = document.querySelectorAll(".mytarget");
x.forEach(myFunction);
function myFunction() {
let hend = document.querySelectorAll(".mytarget");
for (var r = 0; r < hend.length; r++) {
var observer = new IntersectionObserver(function(entries) {
// isIntersecting is true when element and viewport are overlapping
// isIntersecting is false when element and viewport don't overlap
if(entries[0].isIntersecting === true)
entries[0].target.classList.add('active');
/* entries[0].target.style.color = "green"; */
/* فكك من ازاي تشيل الكلاس من العنصر لما تخرج شيل اي اكتف من بقيت العناصر وادي التارجت اكتف */
}, { threshold: [0] });
observer.observe(hend[r]);
}
/* to add it in all elements
var targets = [Array.from(document.querySelectorAll('.csss')), Array.from(document.querySelectorAll('.csss'))].flat();
targets.forEach(target =>
observer.observe(target));
*/
}
}
</script>
</body>
</html>
