透明导航栏在加载时未激活

Question

我试图让页面顶部的导航栏在用户开始滚动之前保持透明，但是当页面加载时，会出现未设置样式的灰色。在用户向上滚动之前，透明性质不会激活。首次加载页面时，我需要做什么才能使导航栏透明？

HTML

<div class="container">
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">AE</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#">About Me</a>
                        <a href="#">My Life Before Code</a>
                        <a href="#">Portfolio</a>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>

    <div class="container-full-big">
        <div class="jumbotron">
            <h1>Hi. I'm Ashley.</h1>
        </div>
    </div>

CSS

.container-fluid {
    height: 60px;
}

.navbar-default {
    border: none;
}

.navbar-default .navbar-brand {
    font-family: 'Lobster', cursive;
    font-size: 30px;
    color: #ffffff;
}

.navbar-default .navbar-nav>li>a {
    float: left;
    font-size: 20px;
    color: #ffffff;
    padding-top: 20px;
}

.jumbotron {
    background: url("img/sunset.jpg") center center no-repeat;
    font-family: 'Lobster', cursive;
    color: #ffffff;
    background-size: cover;
    height: 100vh;
    padding: 0;
}

JS

 $(window).scroll(function () {
        if ($(window).scrollTop() > 50) {
            $(".navbar-default").css("background", "#443e41");
        } else {
            $(".navbar-default").css("background", "transparent");
        }
    });

Answer 1

您还需要在$(document).ready() 上应用transparent 代码部分

 $(document).ready(function(){
  $(".navbar-default").css("background", "transparent");
});

你也可以试试$('window').load()：-

$('window').load(function(){
  $(".navbar-default").css("background", "transparent");
});