Transparent Background on Divi Header until Scroll using only CSS

Recently I was working on a new client's website using the Divi theme and they wanted a nice visual video background as the homepage hero, so to clean up the visual appeal of the site I wanted to set the Divi header background to transparent, and on scroll bring the background back in.

Below is my quick and not-so-dirty CSS to remove the Divi header background colour until scroll

body.home #page-container {
    padding-top: 0 !important;
}
body.home #main-header {
    background-color: transparent !important;
    box-shadow: none;
}
body.home header#main-header.et-fixed-header {
    background: #fff !important;
}

Please note that the code above is meant only for the homepage, if you remove the body.home it'll reflect on the entire site

Leave a comment below if you have a better way to achieve this or if this piece of CSS worked for you! Until next time.