Transparent header until scroll down

Development

AI-generated summary

The discussion revolves around achieving a transparent header that changes to white when scrolling down. Tim_Jefferies initially attempted to use JavaScript to achieve this effect, but encountered issues.

Tim_Jefferies later managed to get the desired effect working by creating two styles (dHeaderWhite and dHeaderTransparent) and appending them to the document head based on scroll position. However, the header still doesn’t switch from scrollable to fixed on scroll.

1

I’d like to have the header be transparent when at the top of the page, and then when the user scrolls down it becomes white.

I tried adding this javascript code in the ‘edit CSS/HTML’ of the </body> section as follows:

<script>
// When the user scrolls down 100px from the top of the document, change background to white
$(document).ready(function($){
    $(function(){
        $(window).scroll(function(){
            if ($(this).scrollTop() > 100){
                document.getElementsByClassName("d-header").style.backgroundColor = "white";
                document.getElementsByClassName("d-header").style.boxShadow = "0 1px 8px rgba(0,0,0,0.18)";
            } else {
                document.getElementsByClassName("d-header").style.backgroundColor = "transparent";
                document.getElementsByClassName("d-header").style.boxShadow = "unset";
            }
        });
    });
});
</script>

This doesn’t seem to work though. Any ideas?

Ideally I’d like this change to happen at the same time as the page hits the #main-outlet and .d-header changes to a fixed position, but I don’t know how.

2

I managed to get this working well enough.

js:

<script>

var dHeaderWhite = document.createElement('style');
dHeaderWhite.innerHTML = `
/*.docked. .d-header {
    position:fixed;
}*/
.d-header {
    background-color: white;
    box-shadow: 0 1px 8px rgba(0,0,0,0.18);
    -webkit-animation: fadein 0.5s;
    animation: fadein 0.5s;
}`;

var dHeaderTransparent = document.createElement('style');
dHeaderTransparent.innerHTML = `
/*.docked .d-header {
    position:absolute;
}*/
.d-header {
    background-color:transparent;
    box-shadow: unset;
    -webkit-animation: fadeout 0.5s;
    animation: fadeout 0.5s;
}`;

// When the user scrolls down the document, change from transparent background to white
$(document).ready(function($){
    $(function(){
        $(window).scroll(function(){
            
            if ($(".extra-info-wrapper")[0]) {
                // White if class exists
                document.head.appendChild(dHeaderWhite);
            } else if ($(this).scrollTop() > 150) { 
                // class doesn't exist but user has scrolled
                document.head.appendChild(dHeaderWhite);
            } else {
                // Transparent if class doesn't exist
                document.head.appendChild(dHeaderTransparent);
            }
        });
    });
});
</script>

css:

.d-header {
    background-color: transparent;
    box-shadow:unset;
}
.d-header-icons .d-icon {
    color: #9c9c9c;
}

I want the header to start off as scrollable and switched to fixed on scroll, but this doesn’t work yet. I’ll keep hacking away.