Glassmorphism header only on scroll (transparent at top) – Dawn theme

Shopify Discussion
1

Hi everyone,

I’m using Dawn 15.4.0 and I’m trying to create a glassmorphism header that only appears when scrolling.

What I want:

  • Page load / very top of page → header is fully transparent
  • Scroll down → header becomes glassy / blurred
  • Scroll back up → header stays glassy
  • When reaching the very top again → header returns to transparent
  • This should work across the entire website

A good example of the exact behavior I want is:
:backhand_index_pointing_right: https://lovable.dev/

What I’ve tried:

Both methods work, but neither achieves a transparent header at the top + glass only on scroll.

Question:
What’s the best way in Dawn to detect when the page is at the very top vs scrolled, and apply glassmorphism only while scrolling?
Is this doable with CSS only, or does it require a small JavaScript solution?

Thanks in advance!

2

Even on your store (id is stripped for brevity):

At the top:
<div class="shopify-section shopify-section-group-header-group section-header">

Scrolled down, header not shown:
<div class="shopify-section shopify-section-group-header-group section-header scrolled-past-header shopify-section-header-hidden shopify-section-header-sticky">

Scrolled down and back up – header shown again:
<div class="shopify-section shopify-section-group-header-group section-header scrolled-past-header shopify-section-header-sticky animate">

So you can easily base your CSS on these classes – scrolled-past-header and shopify-section-header-sticky. Maybe shopify-section-header-hidden for transitions.

3

Thanks for the explanation I tried following it, but I’m honestly not 100% sure I’m applying it correctly. The header is still showing a white background at the very top, so I think I’m misunderstanding which element or class should be styled.

Would you mind explaining a bit more step by step, specifically which element in Dawn should be transparent at the top and which one should receive the glass effect on scroll?

I’d really appreciate the clarification, thanks again

4

Hi @crepscity

It just requires a bit of JavaScript. Use scrollY to detect and add header classes for top and scrolled states. Have transparent styles by default, glass styles when scrollY is greater than zero, and reset when scrollY returns to zero. You can’t reliably determine the scroll position between pages with CSS alone in Dawn.

5

Hi,

That makes sense. Could you please provide the JavaScript code for implementing this?