스크롤하기 전까지 투명한 헤더

개발
1

페이지 상단에 있을 때 헤더가 투명하고, 사용자가 아래로 스크롤하면 흰색으로 바뀌도록 하고 싶습니다.

아래와 같이 </body> 섹션의 'edit CSS/HTML’에 다음 JavaScript 코드를 추가해 보았습니다:

<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>

하지만 이 코드는 작동하지 않는 것 같습니다. 혹시 아이디어가 있으신가요?

이상적으로는 페이지가 #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;
}

헤더가 처음에는 스크롤 가능하게 시작하다가 스크롤 시 고정(fixed)으로 전환되도록 하려고 하는데, 아직 작동하지 않습니다. 계속 고쳐보겠습니다.