fix(header): improve navbar scroll behavior with banner support

[harishsehlangia]

Before creating this PR, please confirm the following:

• I have read the ReactPlay Contributor Guidelines and Discussion
• I have reviewed the ReactPlay Code Review Checklist
• I have tested my changes locally and verified there are no new warnings or errors

---

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.

Additionally, when the activity banner is enabled, the navbar and banner now behave as a single unit.
They hide and show together based on the same scroll logic, preventing:

• partial hiding of the navbar
• empty space appearing above the header

If the banner is disabled, the navbar continues to work exactly as before.

Without activity banner

• Navbar remains visible inside hero.
• Navbar hides on scroll down after hero.
• Navbar shows on scroll up.

With activity banner enabled

• Banner and navbar hide together on scroll down.
• Banner and navbar show together on scroll up.
• No empty gaps or partial visibility.

Fixes #1665

Type of change

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

How Has This Been Tested?

Tested locally in the browser.

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]

✅ Deploy Preview for reactplayio ready!

Name	Link
🔨 Latest commit	e531766
🔍 Latest deploy log	https://app.netlify.com/projects/reactplayio/deploys/6988bf000afdc50009b7a093
😎 Deploy Preview	https://deploy-preview-1669--reactplayio.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

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]

Thanks for the review and merge!
Excited to continue contributing and improving ReactPlay.