Sticky Transparent Header with White BG on scroll (trade theme)

[MLCNZ]

I am looking for the code to change header to sticky and transparent with white icons and text, then on scroll turn to white background and black text and icons 

I have tried multiple codes and none seem to work

Store is not live or mapped to a domain as yet. 

https://43bc2a-54.myshopify.com/

[PageFly-Richard]

Hi @MLCNZ 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

{% if template == 'index' %}
<style>

.header {
    position: fixed;
    width: 100%;
    top: 40px;
    transition: background-color 0.3s ease;
    left: 0;
    right: 0;
    margin: 0;
    max-width: 100%;
}
.header.transparent {
background-color: transparent;
}

.header.black {
background-color: #fff;
top:0;
}

</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var header = document.querySelector('.header');
header.classList.add('transparent');
});

// Change header background on scroll
window.addEventListener('scroll', function() {
var header = document.querySelector('.header');
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

if (scrollTop > 0) {
header.classList.remove('transparent');
header.classList.add('black');
} else {
header.classList.remove('black');
header.classList.add('transparent');
}
});
</script>
{% endif %}

Hope this can help you solve the issue 

Best regards,

Richard | PageFly 

[MLCNZ]

Thank you I have done this;
1. the text and icons are in black on transparent, can we change to white

2. The white background on header when you scroll doesn't go full page? Can you advise.

Thank you

[MLCNZ]

Hi, 
I have changed the icon and text colour to white: 

But on mobile it is stacked and needs some distance between the header and image banner. 
Can you help with this correction in the code? 

[uglyducking]

Hi, I have tried using the code provided, it worked with transparent background, however when i scroll down the the header became white with white font, is it possible to change it to default trade theme when scroll down? Many thanks!