Sticky Title Bar - ScrollTrigger Fix

The Problem

The featured title bar was not sticking to the top when scrolling. This was due to CSS position: sticky being broken by parent elements with:

  • overflow: hidden (main element)
  • transform properties (various parents)
  • filter properties (various parents)

CSS sticky is notoriously fragile and breaks easily.

The Solution

Use GSAP ScrollTrigger's pin() method instead of CSS sticky positioning.

ScrollTrigger is:

  • ✅ Already loaded in the project
  • ✅ Reliable and works regardless of parent CSS
  • ✅ Easy to implement
  • ✅ Properly integrated with Swup transitions

Implementation

JavaScript (assets/js/featured-title-bar.js)

this.scrollTrigger = ScrollTrigger.create({
  trigger: featuredSection,
  start: 'top top',
  end: 'bottom top',
  pin: titleBar,
  pinSpacing: false,
  markers: false
});

How It Works

  1. When you scroll into the featured section, the title bar pins to the top
  2. It stays pinned while you're scrolling through the section
  3. When you scroll past the section, it unpins

Integration

  • Init: main.js initializes on page load
  • Swup transitions: swup-modern-clean.js calls:
    • cleanup() before page transition (kills ScrollTrigger)
    • reinitialize() after page transition (recreates ScrollTrigger)

Files Changed

  1. /assets/js/featured-title-bar.js - Added ScrollTrigger pin
  2. /assets/css/featured-title-bar.css - Removed CSS sticky positioning
  3. /assets/css/components/gallery.css - Changed overflow-x: hidden to body instead of main

Testing

Refresh the page and scroll down the homepage. The "Featured Work" title bar should now stick to the top while scrolling through the featured posts section.

Debugging

To see ScrollTrigger markers for debugging, set:

markers: true // in featured-title-bar.js line 56