滚动前保持透明标题栏

开发
1

我希望页面顶部时标题栏是透明的，当用户向下滚动时变为白色。

我尝试在 </body> 部分的“编辑 CSS/HTML”中添加以下 JavaScript 代码：

<script>
// 当用户从文档顶部向下滚动 100px 时，将背景改为白色
$(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;
}

我希望页头一开始是可滚动的，滚动后切换为固定定位，但目前这还不起作用。我会继续尝试修改。