Bootstrap 4 - NavBar Fixed with BackGround White

0

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>
    
asked by anonymous 28.08.2018 / 19:17

1 answer

1

Your code is right, only the selector is wrong: this bg-darl does not exist.

You should use nav.scrolled .

See:

$(window).scroll(function(){
   $('nav').toggleClass('scrolled',$(this).scrollTop() > 400);
});
nav.scrolled{
  background-color:white !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<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>
    
28.08.2018 / 20:08