Header Scroll Test

This page tests the fixed header scroll behavior. The header should:

• Maintain a consistent height (min 70px)
• Hide smoothly when scrolling down
• Show smoothly when scrolling up
• Not cause jitter or layout shifts
• Use hardware acceleration for smooth animations

Scroll down to test →

Section 2: Scroll Down Test

Keep scrolling down. The header should smoothly hide as you scroll.

Notice the header's background becomes more opaque after scrolling past 50px.

Section 3: Scroll Up Test

Now scroll back up. The header should immediately show again.

The animation should be smooth without jitter.

Section 4: Rapid Scroll Test

Try scrolling rapidly up and down.

The header should respond smoothly to your scroll direction changes.

Section 5: Mobile Test

Resize your browser to mobile width (375px) or test on a mobile device.

The header should maintain its height and scroll smoothly on all screen sizes.

Section 6: Final Verification

Scroll all the way to the top to verify the header appears correctly at the top of the page.

• ✓ Min height maintained (70px)
• ✓ No layout shifts
• ✓ Smooth transitions
• ✓ Hardware accelerated
• ✓ Passive scroll listeners