How to make initial header transparent and opaque on scroll

You can make the header sit over the content below it using the page header metabox. This is good for achieving a layout where the background image stretches.

This is good until you get past this section and you need the header to go opaque so that the white text is still visible. You can achieve this with a little bit of CSS and using the built in metabox header option on the page editor page.

In the SCSS file in your child theme, set the $header-bg CSS variable to transparent. Then add this CSS to activate the

#tri-header {
    box-shadow: none;
    .header-on-top & {
        background: transparent;
    }
}