Skip to content

fix(header): improve navbar scroll behavior outside hero section#1668

Closed
harishsehlangia wants to merge 3 commits intoreactplay:mainfrom
harishsehlangia:fix/navbar-scroll-behavior
Closed

fix(header): improve navbar scroll behavior outside hero section#1668
harishsehlangia wants to merge 3 commits intoreactplay:mainfrom
harishsehlangia:fix/navbar-scroll-behavior

Conversation

@harishsehlangia
Copy link
Contributor

Before creating this PR, please confirm the following:


First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

The navbar should remain visible while the user is inside the hero section.
After crossing the hero section, the navbar visibility should depend on scroll direction:

  • Scroll DOWN → hide navbar
  • Scroll UP → show navbar

This improves user experience and prevents sudden header disappearance at the top of the page.

Fixes #1665

Type of change

  • Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

  • Tested locally on browser.
  • Navbar remains visible inside hero.
  • Navbar hides on scroll down after hero.
  • Navbar shows on scroll up.
  • No console errors.

Checklist:

  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules

Screenshots or example output

@netlify
Copy link

netlify bot commented Feb 8, 2026

👷 Deploy request for reactplayio pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit 04e2b84

Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey! contributor, thank you for opening a Pull Request 🎉.

@reactplay/maintainers will review your submission soon and give you helpful feedback. If you're interested in continuing your contributions to open source and want to be a part of a welcoming and fantastic community, we invite you to join our ReactPlay Discord Community.
Show your support by starring ⭐ this repository. Thank you and we appreciate your contribution to open source!
Stale Marking : After 30 days of inactivity this issue/PR will be marked as stale issue/PR and it will be closed and locked in 7 days if no further activity occurs.

@harishsehlangia
Copy link
Contributor Author

This PR is closed due to one edge case that is not covered in this PR. I'll solve that and will raise a new PR.
The edge case is explained now in the comment section of issue #1665

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.

🐛 [Bug report]: Navbar hide/show behavior inconsistent after hero section

1 participant