2

Estou fazendo um Navbar onde ele vai diminuir a altura e mudar a cor no evento de scroll. Meu problema está em deixar essa transição suave. Consegui fazer para para a cor, mas não para a altura. Como posso deixar a mudança de altura suave?

$(window).on('scroll', function(event) {
  if ($(window).scrollTop()) {
    $('.navbar').addClass('bg-dark');
    $('.navbar').removeClass('bg-primary teste');
  } else {
    $('.navbar').removeClass('bg-dark');
    $('.navbar').addClass('bg-primary teste');
  }
  if ($(window).scrollTop() > 100) {
    $('.navbar').removeClass('teste');
  } else {
    $('.navbar').addClass('teste');
  }
});
nav {
  transition: 2s all ease-in-out;
}

.navbar.teste>.container {
  min-height: 54px;
}

.navbar.teste>.container>.navbar-brand {
  padding: 0 15px;
  height: 54px;
  line-height: 54px;
}

.navbar.teste>.container>.navbar-brand>.navbar-toggle {
  margin-top: 18px;
  padding: 9px 10px !important;
}

@media (min-width: 768px) {
  .navbar.teste>.container>div>.navbar-nav>li>a {
    padding-top: 16.5px;
    padding-bottom: 16.5px;
    line-height: 16px;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar teste fixed-top navbar-expand-sm navbar-dark bg-primary px-0">
  <div class="container">
    <a class="navbar-brand" href="#">Marca</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active"><a class="nav-link" href="#">Projetos</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Notícias</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Eventos</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Biblioteca</a></li>
      </ul>
    </div>
  </div>
</nav>
<h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1>

2 Respostas 2

2

A altura não diminui suave porque apenas o navbar estava com a transition de 2s. A classe .teste não estava alterando o style do nav, estava alterando outras tags dentro do nav (como o container e a logo) e eles nao tinham o atrabuto transition, que era exatamente o que fazia o nav diminuir.

O que eu fiz foi definir o tamanho do nav e com a classe .teste, ele diminui o tamanho do mesmo. Olha como ficou:

$(window).on('scroll', function(event) {
  if ($(window).scrollTop() > 100) {
    $('.navbar').addClass('bg-dark');
    $('.navbar').removeClass('bg-primary');
    $('.navbar').addClass('teste');
  } else {
    $('.navbar').removeClass('bg-dark');
    $('.navbar').addClass('bg-primary');
    $('.navbar').removeClass('teste');
  }
});
nav {
  transition: 1s all ease-in-out;
}

.navbar {
  height: 65px;
}
.navbar.teste {
  height: 50px;
}

.navbar>.container>.navbar-brand {
  padding: 0 15px;
  line-height: 54px;
}

.navbar>.container>.navbar-brand>.navbar-toggle {
  margin-top: 18px;
  padding: 9px 10px !important;
}

@media (min-width: 768px) {
  .navbar>.container>div>.navbar-nav>li>a {
    padding-top: 16.5px;
    padding-bottom: 16.5px;
    line-height: 16px;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-primary px-0">
  <div class="container">
    <a class="navbar-brand" href="#">Marca</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active"><a class="nav-link" href="#">Projetos</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Notícias</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Eventos</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Biblioteca</a></li>
      </ul>
    </div>
  </div>
</nav>
<h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1>

2
  • eu indicaria você definir a transition com 0.5s, por que 1 segundo demora muito Commented 28/02/2018 às 19:54
  • Muito obrigado. Coloquei esse valor alto só para ficar mais fácil visualizar. Valeu pela resposta
    – Phelipe
    Commented 28/02/2018 às 20:55
1

Jovem a transição com a cor acontece pq vc está trocando uma classe por outra. Mas com a classe .teste que vc colocou a altura não ocorre pq não tem uma referência de valor.

Inclui uma classe nova .testex apenas pare vc ver que o problema é a transição entre um valor e outro. Aparentemente o script está ok...

Fiz o exemplo com a NavBar aumentando e com a transição, mas vc pode fazer como quiser customizando o .textex, deixei um comentário no CSS

$(window).on('scroll', function(event) {
  if ($(window).scrollTop()) {
$('.navbar').addClass('bg-dark testex');
$('.navbar').removeClass('bg-primary teste');
  } else {
$('.navbar').removeClass('bg-dark testex');
$('.navbar').addClass('bg-primary teste');
  }
  if ($(window).scrollTop() > 100) {
$('.navbar').removeClass('teste');
  } else {
$('.navbar').addClass('teste');
  }
});
nav {
  transition: 2s all ease-in-out;
}

.navbar.testex>.container {
  transition: 2s all ease-in-out;
  min-height: 74px; /* valor de referência pro valor da altura da NavBar */
}

.navbar.teste>.container {
  transition: 2s all ease-in-out;
  min-height: 54px;
}

.navbar.teste>.container>.navbar-brand {
  padding: 0 15px;
  height: 54px;
  line-height: 54px;
}

.navbar.teste>.container>.navbar-brand>.navbar-toggle {
  margin-top: 18px;
  padding: 9px 10px !important;
}

@media (min-width: 768px) {
  .navbar.teste>.container>div>.navbar-nav>li>a {
    padding-top: 16.5px;
    padding-bottom: 16.5px;
    line-height: 16px;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar teste fixed-top navbar-expand-sm navbar-dark bg-primary px-0">
  <div class="container">
    <a class="navbar-brand" href="#">Marca</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active"><a class="nav-link" href="#">Projetos</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Notícias</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Eventos</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Biblioteca</a></li>
      </ul>
    </div>
  </div>
</nav>
<h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1>
<h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1>
<h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .