I am building a sidebar nav for a page with a lot of content in it, which scrolls to the associated section when clicked. I would like to also add a class to the currently visible section as you scroll down the page using IntersectionObserver. I have it partially working, but only when the element in question is short enough to fit entirely within the currently viewed portion of the page. If the element is taller than the page, it never triggers the intersecting. I have tried playing around with the rootMargin and threshold values but I am at a loss.
In the example, the only two sections that work properly are #lorem and #sit since they are shorter sections. Any thoughts as to where I am going wrong?
const changeNav = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting && entry.intersectionRatio >= 1) {
document.querySelector('.is-active').classList.remove('is-active');
let id = entry.target.getAttribute('id');
document.querySelector(`[href="#${id}"]`).classList.add('is-active');
}
});
}
const options = {
rootMargin: "0px",
threshold: 1
}
const observer = new IntersectionObserver(changeNav, options);
const sections = document.querySelectorAll('section');
sections.forEach((section) => {
observer.observe(section);
});.container {
width:500px;
margin:0 auto;
}
#lorem {
height:200px;
background:blue;
}
#ipsum {
height:1500px;
background:red;
}
#dolor {
height:1200px;
background:green;
}
#sit {
height:100px;
background:yellow;
}
#amet {
height:1600px;
background:purple;
}
ul {
position:fixed;
top:0;
left:0;
padding:5px 0 5px 5px;
list-style-type:none;
}
li a {
color:gray;
text-decoration:none;
}
.is-active {
text-decoration:underline;
color:black;
}<div class="container">
<section id="lorem"></section>
<section id="ipsum"></section>
<section id="dolor"></section>
<section id="sit"></section>
<section id="amet"></section>
</div>
<ul>
<li><a href="#lorem" class="is-active">Lorem</a></li>
<li><a href="#ipsum">Ipsum</a></li>
<li><a href="#dolor">Dolor</a></li>
<li><a href="#sit">Sit</a></li>
<li><a href="#amet">Amet</a></li>
</ul>