Correct set of intersection observer

Question

currently I'm stuck on correct setting of Intersection observer. I would say it's working like on half, but it still doesn't have desired behavior.

My goal is to make interactive menu which responds to section, which is currently observed. I would like to fire callback function (highlight specific link in menu) as soon as the new section is visible, even if it was small piece, like 1cm.

For now It works until I enlarge font, for example to 25px. You can try to remove this style. Tt also stops working when there is too much text in one section.

section{
  font-size:25px;
} 

I think, this is the place where the problem is.. threshold value or condition itself.

const myObserver = new IntersectionObserver(elements => {
  if (elements[0].intersectionRatio == 1) {
    highlight(elements[0].target);
  }
}, {threshold: 1.0})

If anybody know what is the problem, please help me. I'm stuck on this all day. Thank you !

Codepen here

//Get all sections
const sections = document.querySelectorAll('section');

//Get all links in menu
const menu = document.querySelector('.menu');
const links = menu.querySelectorAll('a');

//Callback function
function highlight(target){
  links.forEach(link => {
    link.classList.remove('active')
    if(link.getAttribute('href') === '#'+target.id){
      link.classList.add('active');
    }
  })
}

const myObserver = new IntersectionObserver(elements => {
  if (elements[0].intersectionRatio == 1) {
    highlight(elements[0].target);
  }
}, {threshold: 1.0})

//Observe every function
sections.forEach(el => myObserver.observe(el));

.menu{
  position:fixed;
  top:0;
  left:0;
  width:30%;
  background:grey;
  height:100%;
}

ul{
  list-style:none;
}

a{
  text-decoration:none;
  color:black;
  font-size:20px;
}

main{
  width:70%;
  margin-left:30%;
}

/*Try to remove this font-size style, to see what I was explaining*/
section{
  font-size:25px;
}

.active{
  color:red;
}

<div class="menu">
  <ul>
    <li><a href="#1">Section 1</a></li>
    <li><a href="#2">Section 2</a></li>
    <li><a href="#3">Section 3</a></li>
  </ul>
</div>

<main>
  <section id="1">
    <h1>Section 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra est elit, eu eleifend dolor elementum non. Nunc imperdiet sagittis augue ac varius. Donec condimentum id erat sed ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi suscipit lectus id purus bibendum, a cursus metus mollis. Mauris elementum malesuada massa non lobortis. Quisque molestie convallis dictum. Curabitur sodales erat finibus nunc mattis congue. Morbi eleifend sed lectus id ultrices. Vivamus varius felis viverra turpis eleifend auctor. Duis aliquet magna ut diam lacinia, non iaculis nulla sagittis. Praesent fringilla ex augue, quis hendrerit arcu facilisis a. Fusce iaculis bibendum orci eu efficitur. Praesent tincidunt nisl a urna posuere, venenatis dapibus leo ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Donec pretium tristique enim in molestie. Fusce lacinia, enim nec bibendum dignissim, nibh nulla laoreet nisl, eget finibus augue eros eu urna. Suspendisse accumsan velit orci, non semper lacus aliquam at. Morbi semper porta eros, sed dignissim nunc auctor et. Vivamus mattis fringilla enim. Nulla pretium at neque at feugiat. Pellentesque dictum id massa nec accumsan. Etiam lectus elit, elementum at velit sit amet, tristique pellentesque sapien. Aliquam eu nisl ac est posuere imperdiet. Proin eu enim quis arcu aliquam consequat a vitae purus. Sed finibus scelerisque risus pretium faucibus. Integer eget nisl eu magna sodales rutrum.

In hac habitasse platea dictumst. Duis eget fringilla tortor. Aliquam eget magna rutrum ex pharetra vulputate. Integer in ex est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consectetur urna odio, sit amet pretium tortor sodales et. Donec molestie bibendum diam, a volutpat urna bibendum sit amet. Fusce congue est imperdiet, lacinia diam non, tempor dui. Integer iaculis lobortis neque id malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus vestibulum diam fringilla turpis tempor interdum. Maecenas egestas fringilla risus id elementum. Cras condimentum turpis et elit lobortis dignissim. 
    adipiscing elit. Nunc viverra est elit, eu eleifend dolor elementum non. Nunc imperdiet sagittis augue ac varius. Donec condimentum id erat sed ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi suscipit lectus id purus bibendum, a cursus metus mollis. Mauris elementum malesuada massa non lobortis. Quisque molestie convallis dictum. Curabitur sodales erat finibus nunc mattis congue. Morbi eleifend sed lectus id ultrices. Vivamus varius felis viverra turpis eleifend auctor. Duis aliquet magna ut diam lacinia, non iaculis nulla sagittis. Praesent fringilla ex augue, quis hendrerit arcu facilisis a. Fusce iaculis bibendum orci eu efficitur. Praesent tincidunt nisl a urna posuere, venenatis dapibus leo ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Donec pretium tristique enim in molestie. Fusce lacinia, enim nec bibendum dignissim, nibh nulla laoreet nisl, eget finibus augue eros eu urna. Suspendisse accumsan velit orci, non semper lacus aliquam at. Morbi semper porta eros, sed dignissim nunc auctor et. Vivamus mattis fringilla enim. Nulla pretium at neque at feugiat. Pellentesque dictum id massa nec accumsan. Etiam lectus elit, elementum at velit sit amet, tristique pellentesque sapien. Aliquam eu nisl ac est posuere imperdiet. Proin eu enim quis arcu aliquam consequat a vitae purus. Sed finibus scelerisque risus pretium faucibus. Integer eget nisl eu magna sodales rutrum.

In hac habitasse platea dictumst. Duis eget fringilla tortor. Aliquam eget magna rutrum ex pharetra vulputate. Integer in ex est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consectetur urna odio, sit amet pretium tortor sodales et. Donec molestie bibendum diam, a volutpat urna bibendum sit amet. Fusce congue est imperdiet, lacinia diam non, tempor dui. Integer iaculis lobortis neque id malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus vestibulum diam fringilla turpis tempor interdum. Maecenas egestas fringilla risus id elementum. Cras condimentum turpis et elit lobortis dignissim.</p>
</section>
  
  <section id="2">
    <h1>Section 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra est elit, eu eleifend dolor elementum non. Nunc imperdiet sagittis augue ac varius. Donec condimentum id erat sed ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi suscipit lectus id purus bibendum, a cursus metus mollis. Mauris elementum malesuada massa non lobortis. Quisque molestie convallis dictum. Curabitur sodales erat finibus nunc mattis congue. Morbi eleifend sed lectus id ultrices. Vivamus varius felis viverra turpis eleifend auctor. Duis aliquet magna ut diam lacinia, non iaculis nulla sagittis. Praesent fringilla ex augue, quis hendrerit arcu facilisis a. Fusce iaculis bibendum orci eu efficitur. Praesent tincidunt nisl a urna posuere, venenatis dapibus leo ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Donec pretium tristique enim in molestie. Fusce lacinia, enim nec bibendum dignissim, nibh nulla laoreet nisl, eget finibus augue eros eu urna. Suspendisse accumsan velit orci, non semper lacus aliquam at. Morbi semper porta eros, sed dignissim nunc auctor et. Vivamus mattis fringilla enim. Nulla pretium at neque at feugiat. Pellentesque dictum id massa nec accumsan. Etiam lectus elit, elementum at velit sit amet, tristique pellentesque sapien. Aliquam eu nisl ac est posuere imperdiet. Proin eu enim quis arcu aliquam consequat a vitae purus. Sed finibus scelerisque risus pretium faucibus. Integer eget nisl eu magna sodales rutrum.

In hac habitasse platea dictumst. Duis eget fringilla tortor. Aliquam eget magna rutrum ex pharetra vulputate. Integer in ex est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consectetur urna odio, sit amet pretium tortor sodales et. Donec molestie bibendum diam, a volutpat urna bibendum sit amet. Fusce congue est imperdiet, lacinia diam non, tempor dui. Integer iaculis lobortis neque id malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus vestibulum diam fringilla turpis tempor interdum. Maecenas egestas fringilla risus id elementum. Cras condimentum turpis et elit lobortis dignissim. 
    adipiscing elit. Nunc viverra est elit, eu eleifend dolor elementum non. Nunc imperdiet sagittis augue ac varius. Donec condimentum id erat sed ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi suscipit lectus id purus bibendum, a cursus metus mollis. Mauris elementum malesuada massa non lobortis. Quisque molestie convallis dictum. Curabitur sodales erat finibus nunc mattis congue. Morbi eleifend sed lectus id ultrices. Vivamus varius felis viverra turpis eleifend auctor. Duis aliquet magna ut diam lacinia, non iaculis nulla sagittis. Praesent fringilla ex augue, quis hendrerit arcu facilisis a. Fusce iaculis bibendum orci eu efficitur. Praesent tincidunt nisl a urna posuere, venenatis dapibus leo ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Donec pretium tristique enim in molestie. Fusce lacinia, enim nec bibendum dignissim, nibh nulla laoreet nisl, eget finibus augue eros eu urna. Suspendisse accumsan velit orci, non semper lacus aliquam at. Morbi semper porta eros, sed dignissim nunc auctor et. Vivamus mattis fringilla enim. Nulla pretium at neque at feugiat. Pellentesque dictum id massa nec accumsan. Etiam lectus elit, elementum at velit sit amet, tristique pellentesque sapien. Aliquam eu nisl ac est posuere imperdiet. Proin eu enim quis arcu aliquam consequat a vitae purus. Sed finibus scelerisque risus pretium faucibus. Integer eget nisl eu magna sodales rutrum.

In hac habitasse platea dictumst. Duis eget fringilla tortor. Aliquam eget magna rutrum ex pharetra vulputate. Integer in ex est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consectetur urna odio, sit amet pretium tortor sodales et. Donec molestie bibendum diam, a volutpat urna bibendum sit amet. Fusce congue est imperdiet, lacinia diam non, tempor dui. Integer iaculis lobortis neque id malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus vestibulum diam fringilla turpis tempor interdum. Maecenas egestas fringilla risus id elementum. Cras condimentum turpis et elit lobortis dignissim.</p>
</section>
  
  <section id="3">
    <h1>Section 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra est elit, eu eleifend dolor elementum non. Nunc imperdiet sagittis augue ac varius. Donec condimentum id erat sed ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi suscipit lectus id purus bibendum, a cursus metus mollis. Mauris elementum malesuada massa non lobortis. Quisque molestie convallis dictum. Curabitur sodales erat finibus nunc mattis congue. Morbi eleifend sed lectus id ultrices. Vivamus varius felis viverra turpis eleifend auctor. Duis aliquet magna ut diam lacinia, non iaculis nulla sagittis. Praesent fringilla ex augue, quis hendrerit arcu facilisis a. Fusce iaculis bibendum orci eu efficitur. Praesent tincidunt nisl a urna posuere, venenatis dapibus leo ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Donec pretium tristique enim in molestie. Fusce lacinia, enim nec bibendum dignissim, nibh nulla laoreet nisl, eget finibus augue eros eu urna. Suspendisse accumsan velit orci, non semper lacus aliquam at. Morbi semper porta eros, sed dignissim nunc auctor et. Vivamus mattis fringilla enim. Nulla pretium at neque at feugiat. Pellentesque dictum id massa nec accumsan. Etiam lectus elit, elementum at velit sit amet, tristique pellentesque sapien. Aliquam eu nisl ac est posuere imperdiet. Proin eu enim quis arcu aliquam consequat a vitae purus. Sed finibus scelerisque risus pretium faucibus. Integer eget nisl eu magna sodales rutrum.

In hac habitasse platea dictumst. Duis eget fringilla tortor. Aliquam eget magna rutrum ex pharetra vulputate. Integer in ex est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consectetur urna odio, sit amet pretium tortor sodales et. Donec molestie bibendum diam, a volutpat urna bibendum sit amet. Fusce congue est imperdiet, lacinia diam non, tempor dui. Integer iaculis lobortis neque id malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus vestibulum diam fringilla turpis tempor interdum. Maecenas egestas fringilla risus id elementum. Cras condimentum turpis et elit lobortis dignissim. 
    adipiscing elit. Nunc viverra est elit, eu eleifend dolor elementum non. Nunc imperdiet sagittis augue ac varius. Donec condimentum id erat sed ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi suscipit lectus id purus bibendum, a cursus metus mollis. Mauris elementum malesuada massa non lobortis. Quisque molestie convallis dictum. Curabitur sodales erat finibus nunc mattis congue. Morbi eleifend sed lectus id ultrices. Vivamus varius felis viverra turpis eleifend auctor. Duis aliquet magna ut diam lacinia, non iaculis nulla sagittis. Praesent fringilla ex augue, quis hendrerit arcu facilisis a. Fusce iaculis bibendum orci eu efficitur. Praesent tincidunt nisl a urna posuere, venenatis dapibus leo ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Donec pretium tristique enim in molestie. Fusce lacinia, enim nec bibendum dignissim, nibh nulla laoreet nisl, eget finibus augue eros eu urna. Suspendisse accumsan velit orci, non semper lacus aliquam at. Morbi semper porta eros, sed dignissim nunc auctor et. Vivamus mattis fringilla enim. Nulla pretium at neque at feugiat. Pellentesque dictum id massa nec accumsan. Etiam lectus elit, elementum at velit sit amet, tristique pellentesque sapien. Aliquam eu nisl ac est posuere imperdiet. Proin eu enim quis arcu aliquam consequat a vitae purus. Sed finibus scelerisque risus pretium faucibus. Integer eget nisl eu magna sodales rutrum.

In hac habitasse platea dictumst. Duis eget fringilla tortor. Aliquam eget magna rutrum ex pharetra vulputate. Integer in ex est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consectetur urna odio, sit amet pretium tortor sodales et. Donec molestie bibendum diam, a volutpat urna bibendum sit amet. Fusce congue est imperdiet, lacinia diam non, tempor dui. Integer iaculis lobortis neque id malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus vestibulum diam fringilla turpis tempor interdum. Maecenas egestas fringilla risus id elementum. Cras condimentum turpis et elit lobortis dignissim.</p>
</section>
</main>

Answer 1

The goal is to highlight the menu item when at least part of its related section is visible.

MDN gives this:

The degree of intersection between the target element and its root is the intersection ratio. This is a representation of the percentage of the target element which is visible as a value between 0.0 and 1.0.

In the given code however, the threshold is set to 1

const myObserver = new IntersectionObserver(elements => {
  if (elements[0].intersectionRatio == 1) {
    highlight(elements[0].target);
  }
}, {threshold: 1.0})

meaning all of the section must be visible for the observation to take place. When the font size is increased, or there is a lot of text in the section, this wont happen so the observation doesn't occur.

If no threshold option is set the observation will occur as soon as the section comes into view which would seem closer to what is desired. So the first thing to try is this code instead:

const myObserver = new IntersectionObserver(elements => {
  if (elements[0].intersectionRatio == 1) {
    highlight(elements[0].target);
  }
})

There also needs to be thought given to what is required when two or more sections are partially in view, and what if two observations fire at once? The above code would be more robust if all the elements that are observed (i.e. are in that elements collection) are dealt with, and in particular to check whether they have an intersection or not. I imagine you'd want to clear the highlighting of their menu item if they aren't in view and set it if there is an intersection.

See https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API for a fuller explanation and a snippet of code which steps through all the observed elements.