Update links dynamically once user scrolls past div with ID

Question

I have a nav menu which I want to update whenever a user scrolls past the section it's referencing.

For example, if the user scrolls past #section-1, I want .configurator__menu-link with the href="#section-1" to become orange.

However, my current logic doesn't work, and I'm unsure why. Initially I thought it may be that my scroll position is being calculated incorrectly because of my scrollTrigger. But, having commented out the code that pins the section, the results are still the same.

Demo here:

$(function() {

  gsap.registerPlugin(ScrollTrigger);

  let container = document.querySelector(".configurator");
  let pin = document.getElementById("configurator-pin");
  let freeroam = document.getElementById("configurator-freeroam");

  ScrollTrigger.create({
    trigger: container,
    start: "top",
    endTrigger: freeroam,
    end: () => `bottom 0%+=${pin.offsetHeight}`,
    invalidateOnRefresh: true,
    pin: pin,
    markers: true
  });

  ScrollTrigger.create({
    trigger: container,
    start: "top",
    endTrigger: freeroam,
    end: () => `bottom 0%+=${pin.offsetHeight}`,
    invalidateOnRefresh: true,
    pin: ".configurator__header",
    markers: true,
    pinSpacing: false
  });


  // UPDATE CLASS ON SCROLL

  var menu = $(".configurator__menu"),
    menu_link = $(".configurator__menu-link"),
    active_class = "configurator__menu-link--active";

  $(window).scroll(function() {
    var scrollTop = $(document).scrollTop();
    var anchors = menu.find(menu_link);
    for (var i = 0; i < anchors.length; i++) {
      if (scrollTop > $(anchors[i]).offset().top - 50 && scrollTop < $(anchors[i]).offset().top + $(anchors[i]).height() - 50) {
        $('.configurator__menu-link[href="#' + $(anchors[i]).attr('id') + '"]').addClass(active_class);
      } else {
        $('.configurator__menu-link[href="#' + $(anchors[i]).attr('id') + '"]').removeClass(active_class);
      }
    }
  });

});

.spacer {
  height: 200px;
  background: lightblue;
}

.configurator {
  overflow: hidden;
}

.configurator__header {
  padding: 30px 0;
  background-color: #FFFFFF;
  z-index: 99;
  width: 100%!important;
  max-width: 100%!important;
}

.configurator__options {
  background: lightblue;
  padding: 30px;
}

.configurator__options-inner {
  padding: 60px 30px;
}

.configurator__options-inner-section{
  margin-bottom: 60px;
}

.configurator__images img {
  width: 100%;
}

.footer {
  height: 300px;
  background-color: lightblue;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<div class="spacer"></div>

<section class="configurator">

  <div class="container">
    <div class="row">
      <div class="col-12">
        <header class="configurator__header">
          <nav class="configurator__menu justify-content-between">
            <a class="configurator__menu-link" href="#section-1">Section 1</a>
            <a class="configurator__menu-link" href="#section-2">Section 2</a>
          </nav>
        </header>
      </div>
    </div>
  </div>

  <div class="container-fluid px-0">
    <div class="row">

      <div class="col-6">
        <div class="configurator__images" id="configurator-pin">
          <img src="https://via.placeholder.com/840x514?text=Image" alt="test" />
        </div>
      </div>

      <div class="col-6">
        <div class="configurator__options">
          <div class="configurator__options-inner" id="configurator-freeroam">
            <div class="configurator__options-inner-section" id="section-1">
              <h2>Section 1</h2>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
              in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
            </div>
            <div class="configurator__options-inner-section" id="section-2">
              <h2>Section 2</h2>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
              in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing

            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

</section>

<footer class="footer"></footer>

In reply to inwerpsel's answer:

Many thanks for showing me this approach, and in hindsight, agree that it's much better than firing code after every scroll event.

I've tested your approach, and whilst it does work, wondering if there's room to optimise it further?

The first thing I'm noticing is that whenever the next section is in view, even slightly, then that nav link will become active. For example, if I'm scrolling down #section-1 and #section-2 is in view, even a little, then that link for #section-2 is active. Whereas from a UX perspective, the majority of the content on their screen is still from #section-1.

Is there a way to delay the active state unless it's 50% in view?

See demo in GIF here

In the GIF you can see that #section-3 isn't even in view, yet its link was active.

Same issue when scrolling back up. Even though most of a section is in view, it will make the previous link active, which is confusing UX wise.

Any way to optimise this further?

Code for updated demo:

$(function() {

  var menu = $(".configurator__menu"),
    menu_link = $(".configurator__menu-link"),
    active_class = "configurator__menu-link--active";

  const activateMenuItem = id => {
    $('.configurator__menu-link').removeClass(active_class);
    $(`.configurator__menu-link[href="#${id}"]`).addClass(active_class);

  }
  const options = {
   // No root option provided means check against the window.
    threshold: 0,
  }

  activateVisibleSectionMenu = (entries) => {
    entries.forEach(entry => {
      console.log(entry);
      if (entry.isIntersecting) {
        // Should be as it becomes the first element on the page.
        activateMenuItem(entry.target.id);
      }
    });
  }
  const observer = new IntersectionObserver(activateVisibleSectionMenu, options);
  const sections = document.querySelectorAll('.configurator__options-inner-section');
  sections.forEach(section => observer.observe(section));


  let container = document.querySelector(".configurator");
  let pin = document.getElementById("configurator-pin");
  let freeroam = document.getElementById("configurator-freeroam");
  ScrollTrigger.create({
    trigger: container,
    start: "top",
    endTrigger: freeroam,
    end: () => `bottom 0%+=${pin.offsetHeight}`,
    invalidateOnRefresh: true,
    pin: pin,
    // markers: true
  });

  ScrollTrigger.create({
    trigger: container,
    start: "top",
    endTrigger: freeroam,
    end: () => `bottom 0%+=${pin.offsetHeight}`,
    invalidateOnRefresh: true,
    pin: ".configurator__header",
    // markers: true,
    pinSpacing: false
  });


});

.spacer {
  height: 200px;
  background: lightblue;
}

.configurator {
  overflow: hidden;
}

.configurator__header {
  padding: 30px 0;
  background-color: #FFFFFF;
  z-index: 99;
  width: 100%!important;
  max-width: 100%!important;
}

.configurator__options {
  background: lightblue;
  padding: 30px;
}

.configurator__options-inner {
  padding: 60px 30px;
}

.configurator__options-inner-section {
  margin-bottom: 60px;
}

.configurator__images img {
  width: 100%;
}

.footer {
  height: 300px;
  background-color: lightblue;
}

.configurator__menu-link--active {
  background: yellow !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<div class="spacer"></div>

<section class="configurator">

  <div class="container">
    <div class="row">
      <div class="col-12">
        <header class="configurator__header">
          <nav class="configurator__menu justify-content-between">
            <a class="configurator__menu-link" href="#section-1">Section 1</a>
            <a class="configurator__menu-link" href="#section-2">Section 2</a>
                    <a class="configurator__menu-link" href="#section-3">Section 3</a>
          </nav>
        </header>
      </div>
    </div>
  </div>

  <div class="container-fluid px-0">
    <div class="row">

      <div class="col-6">
        <div class="configurator__images" id="configurator-pin">
          <img src="https://via.placeholder.com/840x514?text=Image" alt="test" />
        </div>
      </div>

      <div class="col-6">
        <div class="configurator__options">
          <div class="configurator__options-inner" id="configurator-freeroam">
            <div class="configurator__options-inner-section" id="section-1">
              <h2>Section 1</h2>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
              in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
              in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
              in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
              in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
            </div>
            <div class="configurator__options-inner-section" id="section-2">
              <h2>Section 2</h2>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
              in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
            </div>
                        <div class="configurator__options-inner-section" id="section-3">
              <h2>Section 3</h2>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
              in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
              in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
              in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

</section>

<footer class="footer"></footer>

inwerpsel · Accepted Answer · 2022-07-24T11:24:38.643

With an intersection observer you can do this much more efficiently than with a scroll listener. It will only fire when an element either stops or starts intersecting.

const activateMenuItem = id => {
  $('.configurator__menu-link').removeClass(active_class);
  $(`.configurator__menu-link[href="#${id}"]`).addClass(active_class);

}
const options = {
// No root option provided means check against the window.
  threshold: .2,
}

activateVisibleSectionMenu = (entries) => {
  entries.forEach(entry => {
    console.log(entry);
    if (entry.intersectionRatio > opts.threshold) {
      // Should be as it becomes the first element on the page.
      activateMenuItem(entry.target.id);
    }
  });
}
const observer = new IntersectionObserver(activateVisibleSectionMenu, options);
const sections = document.querySelectorAll('.configurator__options-inner-section');
sections.forEach(section => observer.observe(section));

Better performance

With a scroll listener would will be firing continuously on every small scroll movement, while only rarely it actually needs to update something. Even if you'd mark it as passive it's still running way more often than it needs to.

Working example

May need some fine tuning of threshold to get nicer behavior, but it seems to work quite well on your example.

$(function() {

  var menu = $(".configurator__menu"),
    menu_link = $(".configurator__menu-link"),
    active_class = "configurator__menu-link--active";

  const activateMenuItem = id => {
    $('.configurator__menu-link').removeClass(active_class);
    $(`.configurator__menu-link[href="#${id}"]`).addClass(active_class);

  }
  const options = {
   // No root option provided means check against the window.
    threshold: 0,
  }

  activateVisibleSectionMenu = (entries) => {
    entries.forEach(entry => {
      console.log(entry);
      if (entry.isIntersecting) {
        // Should be as it becomes the first element on the page.
        activateMenuItem(entry.target.id);
      }
    });
  }
  const observer = new IntersectionObserver(activateVisibleSectionMenu, options);
  const sections = document.querySelectorAll('.configurator__options-inner-section');
  sections.forEach(section => observer.observe(section));


  let container = document.querySelector(".configurator");
  let pin = document.getElementById("configurator-pin");
  let freeroam = document.getElementById("configurator-freeroam");
  ScrollTrigger.create({
    trigger: container,
    start: "top",
    endTrigger: freeroam,
    end: () => `bottom 0%+=${pin.offsetHeight}`,
    invalidateOnRefresh: true,
    pin: pin,
    markers: true
  });

  ScrollTrigger.create({
    trigger: container,
    start: "top",
    endTrigger: freeroam,
    end: () => `bottom 0%+=${pin.offsetHeight}`,
    invalidateOnRefresh: true,
    pin: ".configurator__header",
    markers: true,
    pinSpacing: false
  });


  // UPDATE CLASS ON SCROLL

  /*$(window).scroll(function() {
    var scrollTop = $(document).scrollTop();
    var anchors = menu.find(menu_link);
    for (var i = 0; i < anchors.length; i++) {
      if (scrollTop > $(anchors[i]).offset().top - 50 && scrollTop < $(anchors[i]).offset().top + $(anchors[i]).height() - 50) {
        $('.configurator__menu-link[href="#' + $(anchors[i]).attr('id') + '"]').addClass(active_class);
      } else {
        $('.configurator__menu-link[href="#' + $(anchors[i]).attr('id') + '"]').removeClass(active_class);
      }
    }
  });*/

});

.spacer {
  height: 200px;
  background: lightblue;
}

.configurator {
  overflow: hidden;
}

.configurator__header {
  padding: 30px 0;
  background-color: #FFFFFF;
  z-index: 99;
  width: 100%!important;
  max-width: 100%!important;
}

.configurator__options {
  background: lightblue;
  padding: 30px;
}

.configurator__options-inner {
  padding: 60px 30px;
}

.configurator__options-inner-section {
  margin-bottom: 60px;
}

.configurator__images img {
  width: 100%;
}

.footer {
  height: 300px;
  background-color: lightblue;
}

.configurator__menu-link--active {
  background: yellow !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<div class="spacer"></div>

<section class="configurator">

  <div class="container">
    <div class="row">
      <div class="col-12">
        <header class="configurator__header">
          <nav class="configurator__menu justify-content-between">
            <a class="configurator__menu-link" href="#section-1">Section 1</a>
            <a class="configurator__menu-link" href="#section-2">Section 2</a>
          </nav>
        </header>
      </div>
    </div>
  </div>

  <div class="container-fluid px-0">
    <div class="row">

      <div class="col-6">
        <div class="configurator__images" id="configurator-pin">
          <img src="https://via.placeholder.com/840x514?text=Image" alt="test" />
        </div>
      </div>

      <div class="col-6">
        <div class="configurator__options">
          <div class="configurator__options-inner" id="configurator-freeroam">
            <div class="configurator__options-inner-section" id="section-1">
              <h2>Section 1</h2>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
              in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
            </div>
            <div class="configurator__options-inner-section" id="section-2">
              <h2>Section 2</h2>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
              in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing

            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

</section>

<footer class="footer"></footer>

Fix for inconsistent behavior

The threshold is quite useless, an item may not fit the whole container so we can't rely on any value higher than 0. Even if 0.2 would work for all, it would result in different offsets depending on the element height.

A fix for this is to not use the entire element, but its first heading. It seems a bit hacky but it's exactly what Github does on their API documentation.

You can find this code by enabling "break on attribute modifications" on one of the sidebar menu items (the ones that get highlighted when you scroll). I won't bother to post it other than an image because it's partially minified code.

Specifically this part is the fix I'm referring to.

return Array.from(document.querySelectorAll("h2, h3")).forEach((function(t) {
    e.observe(t)
}

They also use rootMargin, but I couldn't get that to work on your code.

Many thanks for your answer :) I've updated my question in reply to this — Freddy, Jul 21 '22 at 10:42
Good point, I had used `threshold` but it can't be relied on, since it shows which part of the element is in view. A large element might never pass even a small threshold on a small screen. In theory, [`rootMargin` should work better for this](https://jeffbridgforth.com/visualizing-intersection-observer/). However it doesn't seem to work at all in your example, possibly because of the pre-existing `ScrollTrigger`s, or certain specific incompatible CSS circumstances. — inwerpsel, Jul 22 '22 at 11:12
@Freddy I added a workaround example (from Github's documentation site), with the caveat that I couldn't get the `rootMargin` property to work yet alongside `ScrollTrigger`. You can still try, maybe it works for you. — inwerpsel, Jul 27 '22 at 10:36
Many thanks for the details and efforts inwerpsel :) I haven't had the chance to explore the `rootMargin` approach yet. But will make some time hopefully next week. I'll accept this answer as you have provided me an avenue to explore and also a demo of a somewhat working approach with `threshold`. I will post my `rootMargin` attempt / findings in this same question so I can hopefully assist others :) — Freddy, Jul 28 '22 at 13:08

Update links dynamically once user scrolls past div with ID

In reply to inwerpsel's answer:

1 Answers1

Better performance

Working example

Fix for inconsistent behavior