How to create a fading effect for a custom header in Dawn theme?

Store Design
, , ,

Topic summary

A user is implementing a custom header effect in Shopify’s Dawn theme where a large logo fades out as the page scrolls, revealing the native header logo. The current implementation uses JavaScript to toggle visibility based on scroll position (threshold: 10px).

Current behavior:

  • Custom liquid section displays large logo initially
  • On scroll, custom logo disappears and native header appears
  • Uses opacity transitions (0.6s ease)

Desired enhancement:
The user wants to add a top-to-bottom fading effect (similar to parallax but simpler) instead of the current simple opacity fade.

Technical details:

  • Code includes scroll event listener
  • Targets specific section ID and header elements
  • Currently toggles between opacity 0/1 and display none/block
  • Note: The provided code appears partially corrupted/reversed in formatting

The user is seeking CSS or JavaScript modifications to achieve the gradient fade effect while maintaining the scroll-triggered transition functionality.

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

Hello, I have a custom liquid section thats a big logo and fades, then native logo appears in the shopify native header.

I want the custom liquid image/logo to fade from top to bottom, almost like paralax, but not. Just fade and look like it?!

here is the code and hopefully you have a suggestion to change in the code below:

.header__heading-link, #shopify-section-sections--15002690191462__5bda004a-3ebf-4cbd-b81e-a8647d2a3ce4 { transition: opacity 0.6s ease; } .header__heading-link, #shopify-section-sections--15002690191462__5bda004a-3ebf-4cbd-b81e-a8647d2a3ce4 { transition: 0.6s ease; }

Thanks