🔍 What to Observe While Scrolling

1. Natural Movement (0.0) - Green Header

This header moves exactly with your scroll speed, providing the most intuitive experience. Notice how it feels completely connected to your scrolling motion.

• Pros: Most natural and intuitive feel
• Cons: May occasionally show small gaps on very fast scrolling
• Best for: Content-focused sites, reading experiences

2. Balanced Default (1.0) - Blue Header

The default value provides a sweet spot between natural movement and gap prevention. It predicts one scroll step ahead for smoother transitions.

• Pros: Good balance of natural feel and reliability
• Cons: Very subtle snapping might be noticeable to sensitive users
• Best for: Most general-purpose applications

3. Eager Prevention (2.0) - Orange Header

More aggressive gap prevention that predicts two scroll steps ahead. Notice the more pronounced snapping behavior.

• Pros: Virtually eliminates visual gaps
• Cons: More noticeable artificial snapping
• Best for: Complex interfaces where gaps cause layout issues

4. Magnetic Effect (3.0) - Red Header

Creates an intentional "magnetic" attraction to the top edge. The snapping becomes a deliberate part of the design language.

• Pros: Completely predictable, no gaps, distinctive behavior
• Cons: Least natural movement
• Best for: Gaming interfaces, when snapping is desired as a feature

🧪 Try These Tests

Slow Scrolling: All headers should feel natural and smooth.

Fast Scrolling: Notice how higher values prevent gaps but feel less natural.

Direction Changes: Quickly reverse scroll direction and observe how each header responds.

Momentum Scrolling: On mobile/trackpad, try flick scrolling to see behavior during deceleration.

🎯 Making Your Choice

The right snapEagerness value depends on your specific use case:

Choose 0.0-1.0 when:

• Natural movement is your top priority
• Building content-focused or reading interfaces
• Users typically scroll at moderate speeds
• You want the least distracting behavior possible

Choose 1.5-2.5 when:

• You have complex header layouts that can't show gaps
• Building mobile-first experiences (touch scrolling is often faster)
• Visual consistency is more important than naturalness
• You have animations or transitions that need reliable positioning

Choose 3.0+ when:

• Snapping behavior aligns with your design language
• Building gaming or highly interactive interfaces
• You want the header behavior to feel intentional and distinctive
• Zero tolerance for any visual gaps or inconsistencies

📝 Implementation

Setting snapEagerness is simple:

// Natural movement
naturalStickyTop(element, { snapEagerness: 0.0 });

// Balanced default (same as omitting the parameter)
naturalStickyTop(element, { snapEagerness: 1.0 });

// Eager gap prevention
naturalStickyTop(element, { snapEagerness: 2.0 });

// Magnetic effect
naturalStickyTop(element, { snapEagerness: 3.0 });

Keep scrolling to continue testing all four behaviors simultaneously!

This direct comparison eliminates the guesswork - you can immediately see and feel the differences between each setting.