Add 1px border to header only on scroll (Atelier theme)

Shopify Discussion
1

Hi everyone,
I have a transparent header that turns white on scroll. I added this CSS in base:

.header {
  border-bottom: 1px solid black;
}

However, I only want the 1px line border to appear after scrolling, and not on page load or when the header returns to transparent at the top.
I think I need JS to add a class like .scrolled-past-header when the header becomes sticky.

Can someone help me with the correct JS and where to place it in the Atelier theme?

Thanks!

2

Hey @runwayfashion

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hi, @runwayfashion
In my opinion, the header-component has data-sticky-state attribute and you can apply css when the value of that attribute is set to “idle”
So you can add CSS like this

header-component[data-sticky-state='idle'] {
  border-bottom: 1px solid black;
}

Anyway, it will be better if I can check your store.
Thanks.

David.

5

Hi, its a brand new Atelier theme so you can see the demo:

6

Hi, that would be great if you can share your code.

8

Hi, this did not work?

10

Hi, the store is not activated yet, im using the Atelier theme:

12

Hey @runwayfashion

Atelier is a type of theme whose class updates depending on what your header setting is so without sharing your store URL or preview URL then it’s just guess work nothing else.

Without having a look at your store, I’m not sure if this would work for you or not but you can try to add this code in the “Custom CSS” option of your header in theme editor.

.header[transparent][transparent=not-sticky][data-sticky-state=active] {
    border-bottom: solid 2px black !important;
}

Best,
Moeed

13

Ah, sorry.

The opacity of header-component turns to 0 when the sticky state is ‘idle’.

You can try this.

header-component[data-sticky-state='idle'] {
  opacity: 1 !important;
  box-shadow: 1px 0 red;
}
header-component[data-sticky-state='idle'] > div {
  opacity: 0;
}
15

Hi, thank you this worked.

17

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.