I want header to be transparent until it's on slideshow but after it gets scrolled down

Shopify Discussion
1

I want header to be transparent until it’s on slideshow but after it gets scrolled down from slideshow it should get opaque.

https://rousestore.com/

store url and no password attached

2

To achieve this effect, you can use CSS and JavaScript to change the opacity of the header based on the user’s scroll position. Here’s a general approach you can take:

  1. Set the initial opacity of the header to 0 using CSS. This will make it transparent.
  2. Use JavaScript to detect when the user has scrolled past the slideshow. You can do this by adding an event listener to the window object and checking the scroll position.
  3. Once the user has scrolled past the slideshow, add a CSS class to the header that sets the opacity to 1. This will make the header opaque.
  4. Remove the CSS class and set the opacity back to 0 when the user scrolls back up to the slideshow.
3

Can you write a code for it as well

4

Hi @Vishavjit ,

There is no simple code for this one. You have to hire a developer to write the code for you to ensure that it works well with your theme. I have written a paid code for transparent header that works with sticky header, like you mentioned. This works with any Shopify FREE themes only