Transparent Header (only on home page) - Dawn Theme

[ByAprilCo]

Hey guys, found the below code in another thread - and works great on home page or pages with large banners on the top, but for pages that dont have images, it shows like the attached  which isnt ideal - how do I set this code to only apply to the home page? Thanks 🙂

<style>
.header {
position: fixed;
top: 40px;
left: 0;
width: 100%;
max-width: 100%;
z-index: 999;
transition: background-color 0.3s ease;
}

.header.transparent {
background-color: transparent;
}

.header.black {
background-color: black;
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 %}

[Dan-From-Ryviu · Accepted solution]

Hi @ByAprilCo 

You can change code to this so it will apply to homepage only 

{% if template == 'index' %}
<style>
.header {
position: fixed;
top: 40px;
left: 0;
width: 100%;
max-width: 100%;
z-index: 999;
transition: background-color 0.3s ease;
}
.header.transparent {
background-color: transparent;
}
.header.black {
background-color: black;
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 %}

[ByAprilCo]

ABSOLUTE LEGEND! Thankyouuuu 

[Dan-From-Ryviu]

You are most welcome, @ByAprilCo 

[emmadub]

Where do you paste this in the code?