Case Study

Overview

The case study content pinning system provides intelligent pinning behavior for .case-study_content-block elements within .case-study-content containers. The system automatically detects content height and viewport dimensions to apply appropriate pinning logic.

Key Features

• Desktop Only: Only activates on devices with min-width: 992px
• Touch Device Detection: Automatically skips on touch devices for better performance
• Adaptive Pinning: Automatically chooses between Short Mode and Long Mode based on content height
• Fixed Header Support: Respects fixed header offsets to prevent content overlap
• Dynamic Re-measurement: Automatically adjusts on resize and content changes
• ScrollSmoother Integration: Works seamlessly with existing ScrollSmoother setup

HTML Structure

<div class="case-study-content">
  <div class="case-study_content-block">
    <!-- Your case study content here -->
  </div>
</div>

Pinning Modes

Short Mode (CBH <= VH)

When: Content block height is less than or equal to viewport height

Behavior:

• Content block pins from the top of the viewport (accounting for fixed header)
• Remains fully visible while the page scrolls
• Unpins when the container section ends

Use Case: Short case study summaries, key metrics, or brief content blocks

Long Mode (CBH > VH)

When: Content block height is greater than viewport height

Behavior:

• Content block pins to the viewport
• Page scroll drives internal content scrolling
• User can read through the entire content block while it appears fixed

Use Case: Long-form case studies, detailed analysis, or extensive content

Configuration

Fixed Header Support

The system automatically detects fixed headers using these selectors:

• header[data-fixed]
• .header-fixed
• .fixed-header
• [data-header="fixed"]

Device Detection

Desktop Breakpoint: min-width: 992px

Touch Device Detection:

"ontouchstart" in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0

API

Global Instance

// Access the global instance
window.caseStudyPinning

// Refresh pinning manually
caseStudyPinning.refresh()

// Destroy the pinning system
caseStudyPinning.destroy()

Class Usage

// Create new instance
const pinning = new CaseStudyPinning()

// Refresh measurements
pinning.refresh()

// Cleanup
pinning.destroy()

Integration with Existing Systems

ScrollSmoother

The pinning system automatically integrates with ScrollSmoother:

• Refreshes ScrollSmoother effects after measurements
• Uses the same scroll context as ScrollSmoother
• Maintains smooth scrolling performance

Case Study Toggle

When the case study content is toggled open/closed, the pinning system automatically refreshes to account for the new content dimensions.

Performance Considerations

Resize Handling

• Debounced: Re-measurement is debounced to 200ms to prevent excessive calculations
• ResizeObserver: Uses ResizeObserver for efficient change detection
• RequestAnimationFrame: Measurements are scheduled for optimal timing

Memory Management

• Cleanup: Properly destroys ScrollTriggers and observers
• Event Listeners: Removes event listeners on destroy
• Timeout Clearing: Clears all timeouts to prevent memory leaks

Debugging

Console Logging

The system provides detailed console logging for debugging:

// Device capabilities
console.log('Device capabilities:', {
  isDesktop: true,
  isTouchDevice: false
})

// Measurement data
console.log('Measurement for block 0:', {
  VH: 1080,        // Viewport height
  CBH: 600,        // Content block height
  CTH: 1200,       // Container height
  H: 80,           // Fixed header offset
  mode: 'Short'    // Pinning mode
})

// Pinning configuration
console.log('Short mode pinning for block 0:', {
  pinStart: '80px',
  pinEnd: '+=600px',
  scrollDistance: 600
})

Test Page

Use /case-study-test.html to test the functionality:

• Contains both short and long content blocks
• Shows debug information in the bottom-left corner
• Demonstrates fixed header offset handling
• Includes toggle button functionality

Browser Support

• Modern Browsers: Full support in all modern browsers
• ResizeObserver: Uses ResizeObserver API (polyfill available if needed)
• GSAP: Requires GSAP 3.12+ with ScrollTrigger and ScrollSmoother plugins

Troubleshooting

Pinning Not Working

1. Check Device: Ensure you're on desktop (992px+) and not a touch device
2. Verify HTML Structure: Ensure .case-study_content-block is inside .case-study-content
3. Console Errors: Check browser console for measurement errors
4. ScrollTrigger: Ensure ScrollTrigger is properly loaded

Performance Issues

1. Too Many Blocks: Consider limiting the number of pinned blocks
2. Resize Frequency: Adjust debounce timeout if needed
3. Complex Content: Avoid complex animations within pinned content

Content Not Pinning Correctly

1. Container Height: Ensure container has sufficient height for pinning
2. Fixed Header: Verify fixed header detection is working
3. Measurement Timing: Content may need time to load before measurement