Skip to content

Hide header on scroll down, reveal on scroll up#61

Open
Wilfred wants to merge 1 commit intomainfrom
claude/fix-toolbar-scroll-behavior-LHWKN
Open

Hide header on scroll down, reveal on scroll up#61
Wilfred wants to merge 1 commit intomainfrom
claude/fix-toolbar-scroll-behavior-LHWKN

Conversation

@Wilfred
Copy link
Copy Markdown
Owner

@Wilfred Wilfred commented Mar 25, 2026

Summary

  • The fixed header wastes vertical space when users are reading content
  • Header now auto-hides when scrolling down and reappears when scrolling up
  • Uses a CSS transform: translateY(-100%) with a 0.3s ease transition for smooth animation
  • Scroll detection ignores the first 60px so the header stays visible at the top of the page

Test plan

  • Open any page on the website and scroll down — header should slide out of view
  • Scroll back up — header should slide back into view
  • Refresh page at top — header should be visible immediately
  • Test on mobile viewport widths to ensure responsive behavior is preserved

https://claude.ai/code/session_01R5fn9FzwMAomYvf5aNSmCR

The fixed header takes up space when users are reading content.
Add scroll-direction detection to auto-hide the header when scrolling
down and reveal it when scrolling up, using a CSS transform transition.

https://claude.ai/code/session_01R5fn9FzwMAomYvf5aNSmCR
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants