En-tête transparent jusqu'au défilement vers le bas

Dev
1

J’aimerais que l’en-tête soit transparent en haut de la page, puis qu’il devienne blanc lorsque l’utilisateur fait défiler la page vers le bas.

J’ai essayé d’ajouter ce code JavaScript dans l’option « Modifier le CSS/HTML » de la section </body> comme suit :

<script>
// Lorsque l'utilisateur fait défiler la page de 100 px depuis le haut du document, changer l'arrière-plan en blanc
$(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>

Cependant, cela ne semble pas fonctionner. Des idées ?

Idéalement, j’aimerais que ce changement se produise au même moment où la page atteint #main-outlet et que .d-header passe en position fixe, mais je ne sais pas comment faire.

2

J’ai réussi à faire fonctionner cela assez correctement.

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;
}`;

// Lorsque l'utilisateur fait défiler le document vers le bas, passer d'un fond transparent à blanc
$(document).ready(function($){
    $(function(){
        $(window).scroll(function(){
            
            if ($(".extra-info-wrapper")[0]) {
                // Blanc si la classe existe
                document.head.appendChild(dHeaderWhite);
            } else if ($(this).scrollTop() > 150) { 
                // La classe n'existe pas mais l'utilisateur a fait défiler
                document.head.appendChild(dHeaderWhite);
            } else {
                // Transparent si la classe n'existe pas
                document.head.appendChild(dHeaderTransparent);
            }
        });
    });
});
</script>

css :

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

Je veux que l’en-tête commence par être défilable et passe à un positionnement fixe lors du défilement, mais cela ne fonctionne pas encore. Je continuerai à bidouiller.