Highlight Links On Scroll

The highlight-links-on-scroll plugin automatically highlights navigation links (usually in a sidebar or table of contents) as their corresponding sections scroll into view. It uses GSAP’s ScrollTrigger to track the position of headings in the viewport.

In development, it is implemented in assets/js/modules/highlight-links-on-scroll.js and is initialized automatically by assets/js/main.js.

Markup Requirements

To use the plugin, you must follow this structure:

Add data-highlight-on-scroll on a parent wrapper element that contains your anchor links.
Inside it, place your navigation links. These links must be anchor links (e.g., <a href="#section-id">).
In the content area, ensure you have elements with id attributes that match the href of the links (without the #).

For the element with data-highlight-on-scroll to stay in view as you scroll down through the content, it needs to be made “sticky”. Because GSAP’s smooth scrolling interferes with the native CSS position: sticky, it’s recommended to wrap it using the Pinned Side plugin, data-pinned-side.

Notes:

The plugin will automatically add the data-highlight-on-scroll-active-link attribute to the currently active link and remove it from others.

Custom scroll start position

By default, a navigation link is highlighted when its corresponding heading scrolls to 40% from the top of the viewport (i.e. top 40%). You can override this per-instance by adding the data-highlight-on-scroll-start attribute with any valid GSAP ScrollTrigger start value.

For example, adding data-highlight-on-scroll-start="top 20%" will cause links to activate earlier — when their heading reaches 20% from the top of the viewport.


<!-- Default: highlights at top 40% -->
<ul data-highlight-on-scroll>
 
<!-- Custom: highlights at top 20% -->
<ul data-highlight-on-scroll data-highlight-on-scroll-start="top 20%">

Markup Example

Below is an example markup. Key details are included in the HTML comments


<!-- Start: data-pinned-side-container wrapper for the layout -->
<div class="grid grid-cols-1 items-start gap-8 lg:grid-cols-3" data-pinned-side-container>
  
  <!-- Sidebar column with pinned-side plugin -->
  <div class="hidden lg:block" data-pinned-side>
    <aside>
      <!-- Navigation Menu -->
      <!-- Start: data-highlight-on-scroll on the links wrapper -->
      <!-- Optional: use data-highlight-on-scroll-start to customize the scroll trigger start position -->
      <ul class="space-y-0" data-highlight-on-scroll data-highlight-on-scroll-start="top 30%">
        <li>
          <!-- Links must have href starting with # -->
          <!-- Add data-highlight-on-scroll-active-link attribute for the active link on page load -->
          <a 
            href="#introduction" 
            data-highlight-on-scroll-active-link
            class="group flex items-center gap-3 border-l border-white/20 py-3 pl-4 text-sm text-white/60 transition-all duration-300 ease-in-out hover:border-white/60 hover:text-white"
          >
            <span class="text-[10px] font-bold tracking-wider text-white/30">01</span>
            Introduction
          </a>
        </li>
        <li>
          <a 
            href="#features" 
            class="group flex items-center gap-3 border-l border-white/20 py-3 pl-4 text-sm text-white/60 transition-all duration-300 ease-in-out hover:border-white/60 hover:text-white"
          >
            <span class="text-[10px] font-bold tracking-wider text-white/30">02</span>
            Features
          </a>
        </li>
      </ul>
      <!-- End: data-highlight-on-scroll on the links wrapper -->
    </aside>
  </div>
  
  <!-- Content column -->
  <div class="lg:col-span-2">
   <article class="prose">
       <!-- Ensure IDs match the hrefs in the navigation -->
       <h2 id="introduction">Introduction</h2>
       <p>Section content goes here...</p>
       <h2 id="features">Features</h2>
      <p>Section content goes here...</p>
   </article>
  </div>
 
</div>
<!-- End: data-pinned-side-container wrapper -->

Demo Example

View the complete code sample on this page.

StatixFlow Highlight Links on Scroll Example

Blog Post Page