Sticky transparent header on dawn

Store Design
1

Looking for some help.

I’m on dawn theme and I have a transparent header that turns into a sticky header and becomes white when i scroll down or up. It turns white when i scroll down far enough but there is a period where it is still transparent and the header items clash with things on the page. I want to make it so that it only becomes a sticky header when scrolling up (to avoid it clashing with things as i scroll down).

Heres the code i implemented to get it this far:

sticky-header { background-color: transparent !important; transition: all 100ms !important; } body:has(.scrolled-past-header) sticky-header { background-color: white !important; } .section-header { position: fixed !important; width: 100% !important; top: 50px !important; transition: all 300ms !important; } body:has(.scrolled-past-header) .section-header { top: 0 !important; } sticky-header li, sticky-header a, sticky-header span, sticky-header svg,{ color: black !important; } sticky-header p { color: white !important; } sticky-header span { } body:has(.scrolled-past-header) sticky-header li, body:has(.scrolled-past-header) sticky-header a, body:has(.scrolled-past-header) sticky-header span, body:has(.scrolled-past-header) sticky-header svg, { color: black !important; filter: none !important; } body:has(.scrolled-past-header) sticky-header p { color: white !important; } .predictive-search__item-content * { color: black !important; } body:has(.scrolled-past-header) sticky-header #menu-drawer a, body:has(.scrolled-past-header) sticky-header .menu-drawer__utility-links svg { color: black !important; }

I’m hoping someone can help me turn it into a scroll up sticky header as i copied the majority of this code from someone else’s post.

2

@drewbarzy

The issue is that CSS alone can’t detect scroll direction, which is necessary for making the sticky header appear only when scrolling up. You’ll need to add a small JavaScript snippet to detect when you’re scrolling up or down, and then apply a class to the header when scrolling up.

Here are the steps to help you:

Step 1: Add JavaScript to detect scroll direction

First, you’ll need to add some JavaScript to detect if you’re scrolling up or down.

  1. Open your theme.liquid file or any file where you can add global JavaScript.
  2. Before the closing tag, add the following Javascript:

This script will track your scroll position and add the scroll-up class to the header when scrolling up.

Step 2: Update your CSS

Now, you’ll need to modify your CSS to only apply the sticky behavior when the scroll-up class is present. Update your CSS like this:

sticky-header {
  background-color: transparent !important;
  transition: all 100ms !important;
}

.scroll-up {
  background-color: white !important;
}

.section-header {
  position: fixed !important;
  width: 100% !important;
  top: 50px !important;
  transition: all 300ms !important;
}

.scroll-up .section-header {
  top: 0 !important;
}

.scroll-up sticky-header li,
.scroll-up sticky-header a,
.scroll-up sticky-header span,
.scroll-up sticky-header svg {
  color: black !important;
}

.scroll-up sticky-header p {
  color: white !important;
}

Step 3: Test the changes

Once you add the JavaScript and update your CSS, the header should become sticky only when you’re scrolling up, and remain transparent while scrolling down.

Step 4: For a cleaner integration

For a cleaner integration, consider adding the JavaScript and CSS into separate files within your theme’s assets folder. You can then reference these files in your theme.liquid file to keep your code organized.

Let me know if you run into any issues!

3

Hi there, thanks for your help its much appreicated.

Unfortunately i should have made clearer than i don’t want the sticky header at all whilst scrolling down. Only when scrolling up.

So normal transparent header staying where it is when scrolling down, then when scrolling up i want it to turn white and become a sticky header.

4

@drewbarzy Try the following revised JavaScript and CSS instead.

Javascript

CSS:

/* Default transparent header behavior */
.sticky-header {
  background-color: transparent !important;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 999;
  transition: background-color 100ms, top 300ms !important;
}

/* Sticky behavior when scrolling up */
.scroll-up {
  position: fixed !important;
  background-color: white !important;
  top: 0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Adds shadow when sticky */
}

/* Adjust header styles when sticky */
.scroll-up .sticky-header li,
.scroll-up .sticky-header a,
.scroll-up .sticky-header span,
.scroll-up .sticky-header svg {
  color: black !important;
}

.scroll-up .sticky-header p {
  color: white !important;
}

Let me know how that turns out!

5

Hi RObert, that has now made it so that the header is only sticky when scrolling up, however the default header is now white instead of transparent :weary_face:

6

This is the code I used to keep it transparent but the problem is that it doesn’t stay sticky. If anyone has a solution to that please let me know.

Put this at the end of the header.liquid section

.header-wrapper { position: fixed; top: 0; left: 0; width: 100%; background: transparent; border: none; z-index: 999; }

I found that code searching shopify forums