Speak, I'm having problems, because I can not leave my NavBar with a white background when it goes from 400px down. I want her transparent in the beginning and after 400px she will have a white background.Ps: I want to edit the navbar when I can do this. Follow the code
<!DOCTYPE html>
<html>
<head>
<title>Titulo.</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<meta name="viewport" content="width=device-width", initial-scale=1>
<link rel="stylesheet" href="css/all-animation.min.css" type="text/css">
<link rel="stylesheet" href="css/animate.css" type="text/css">
<link rel="shortcut icon" href="caminhodoarquivo/favicon.ico">
<link rel="stylesheet" href="css/reset.css" type="text/css">
<style>
bg-darl.scrolled(TENTEI FAZER ISSO MAS N DEU) {
background-color:white !important;
}
</style>
</head>
<body>
<div class="mynavbar">
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a href="indexpadrao.html" class="navbar-brand">
<img src="images/logo.png">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#conteudoNavbarSuportado" aria-
controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna
navegação">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="conteudoNavbarSuportado">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="plans.html" class="nav-link text-white">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link text-white">Sobre</a>
</li>
<li class="nav-item pr-2">
<a href="#" class="nav-link text-white">Portifolio</a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-outline-
light">Contato</button>
</li>
</ul>
</div>
</nav>
<div class="principal2">
<h1 class="display-1">Meu Nome é Matheus Luiz.</h1>
<hr>
<h3 class="display-1">Sejam Bem-Vindos e conheçam um pouco do meu
trabalho.</h3>
<button type="button" class="btn btn-outline-dark btn-lg display-1"
style="padding-left:30px;padding-right: 30px;font-size:1.8rem">Saiba
mais</button>
</div>
</div>
<!-- Primeiro o jsquery -->
<!-- Segundo o Popper min -->
<!-- Terceiro o Bootstrap js -->
<script type="text/javascript" src="js/our.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script>
$(window).scroll(function(){
$('nav').toggleClass('scrolled',$(this).scrollTop() > 400);
});
</script>
</body>
</html>