Прозрачный заголовок до прокрутки вниз

Разработка
1

Я бы хотел, чтобы шапка была прозрачной, когда страница находится вверху, а при прокрутке вниз становилась белой.

Я попробовал добавить этот JavaScript-код в раздел «Редактировать CSS/HTML» перед тегом </body> следующим образом:

<script>
// Когда пользователь прокручивает страницу вниз на 100 пикселей от верха документа, меняем фон на белый
$(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>

Однако это, похоже, не работает. Есть какие-нибудь идеи?

В идеале я хотел бы, чтобы это изменение происходило одновременно с тем, как страница достигает #main-outlet и .d-header переходит в фиксированное положение, но я не знаю, как это сделать.

2

Мне удалось заставить это работать достаточно хорошо.

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

// Когда пользователь прокручивает документ вниз, меняем прозрачный фон на белый
$(document).ready(function($){
    $(function(){
        $(window).scroll(function(){
            
            if ($(".extra-info-wrapper")[0]) {
                // Белый, если класс существует
                document.head.appendChild(dHeaderWhite);
            } else if ($(this).scrollTop() > 150) { 
                // Класс не существует, но пользователь прокрутил
                document.head.appendChild(dHeaderWhite);
            } else {
                // Прозрачный, если класс не существует
                document.head.appendChild(dHeaderTransparent);
            }
        });
    });
});
</script>

css:

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

Я хочу, чтобы заголовок сначала был прокручиваемым, а при прокрутке переходил в фиксированное положение, но пока это не работает. Буду продолжать экспериментировать.