Transparent Sticky Header That Changes Color After Scrolling Past Image Banner | Sense theme

Store Design
, , , ,

Topic summary

A user wants to implement a sticky header with specific behavior:

Desired functionality:

  • Header should be transparent with white text/icons/logo when positioned over the image banner
  • After scrolling past the banner, header background changes to white with black text/icons/logo
  • This transparent effect should apply only to the homepage
  • Other pages should maintain a standard white header

Reference examples: The user provided petlibro.com and cheerble.com as visual references for the desired effect.

Current setup: Using the Sense theme.

Status: A support representative responded, requesting that the user first add an Image banner section to their store and set the Header sticky option to “Always” before custom code can be provided. The discussion appears ongoing, awaiting the user’s implementation of these preliminary steps.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Looking to implement a sticky header like the website here: https://petlibro.com/ or https://www.cheerble.com/en-eu

Where menu text/icons/logos are white and the header is transparent while above image banner and when you scroll past the image banner, the menu/icons/logo is black while the header is white. I would like to keep the header white for other pages. Also, I would like the header to be transparent only on the homepage, and on the other pages, it can be the regular one. I’m using the Sense theme.

Thanks!

Store URL: https://claws-paws.us

2

Hi @PawsClaws

Please add Image banner section to your store and change Header sticky option to Always so I can give you the code to do that.