Transparent header on homepage, and solid one on the other pages

Store Design

Topic summary

Request to implement two distinct headers with scroll-based behavior. Goal: replicate the effect seen on gadzhi.com.

Requirements:

  • Header 1 (homepage only): transparent, sits at the top initially, and is not sticky (does not remain fixed on scroll).
  • Header 2 (site-wide): solid color, sticky (fixed during scrolling). On the homepage, it should remain hidden at the top initially and only appear after the user scrolls past a certain height. On all other pages, it should appear from the start and be sticky.

Notes:

  • “Sticky” refers to a header that stays fixed at the top while scrolling.
  • Open to either using two separate headers or any alternative method to achieve the same visual/behavioral result.

Status: No solutions or implementations provided yet; the request is seeking guidance and remains open.

Summarized with AI on December 29. AI used: gpt-5.
1

I would like to create two headers on my website.

Header 1 - Will only be displayed on homepage, it’s transparent and it’s not sticky

Header 2 - Solid Color, The header which shows on every page and it’s sticky. I want this header to be the one which appears when scrolling on the homepage but not appear at the top of the page since there is where the transparent one is. I want this header to be sticky in a way which appears when scrolling a certain page height.

I basically want two headers which appear like on this site, on if there is any other solution to achieve this I’d be eternally grateful.

https://www.gadzhi.com

Thanks