Animação fixar menu não funciona | Bootstrap: criação de uma single-page responsiva

Solucionado (ver solução)

Solucionado
(ver solução)

4
respostas

por Martins Isata Domingos

| 220.1k xp | 71 posts

Técnico de Implementação SI

Boas caros,

Segue as aulas passo a passo. Ao testar o animação feita para fixar o menu, não funciona:

Adicionei o js no meu projecto:

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/estilo.css">
    <script src="jquery/jquery.js"></script>
    <script src="jquery/navbar-animation-fix.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale =1">

</head>

Ficheiro navbar-animation-fix.js:


$('#collapse-navbar').on('show.bs.collapse', function() {
    $('.topCasaFina-banner').css('transform','translate(-50%, 10%');
});

$('#collapse-navbar').on('hide.bs.collapse', function() {
    $('.topCasaFina-banner').css('transform','translate(-50%, -50%');
});

Meu CSS:


.topCasaFina-banner {
    color: #FFF;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    width: 80%;
    border-radius: 8px;
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s;


}

podem por favor ajudar?

tks

4 respostas

por Luiz Fernando Maehana

| 610.1k xp | 403 posts

Desenvolvedor Front-end

31/10/2017

Olá Martins!

Tudo certo?

Na aula eles colocam o elemento collapse com o id collapse-navbar, e nos exemplos ele fala pro JS procurar o navbar-topCasaFina, vi que no seu exemplo você já configurou o seu JS para procurar o collapse-navbar, testei aqui com o seu código e funcionou, poderia disponibilizar também o HTML do header?

Você alterou o CSS do header também conforme a aula?

Abraços!

por Martins Isata Domingos

| 220.1k xp | 71 posts

Técnico de Implementação SI

04/11/2017

Bom dia Luiz,

Tudo bem?

Segue o HTML do header:

<header>
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">    
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-navbar" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>                
                    </button>
                    <a class="navbar-brand" href="#">Top Casa Fina Arquitetura</a>
                </div>
                <div class="collapse navbar-collapse" id="collapse-navbar">            
                    <ul class="nav navbar-nav">
                        <li><a href="#sobre-nos">Sobre Nós</a></li>
                        <li><a href="#nossos-projecto">Nossos Projectos</a></li>
                        <li><a href="#depoimentos">Depoimentos</a></li>
                        <li><a href="#videos">Videos</a></li>
                        <li><a href="#contactos">Contactos</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="topCasaFina-banner">
            <h1>TopCasaFina Arquitetura</h1>
            <p>Projectando a casa do senho desde 2000 antes do MArtins</p>
            <button class="btn btn-primary btn-lg">Contacto-nos agora</button>
        </div>
    </header>

Meu CSS completo

#painel-sobre {
    margin-top: 20px;
}

html,
body {
    height: 100%;
}

header {
    background-image: url(../img/castelo.jpg);
    background-size: cover;
    background-position: top center;
    height: 100%;
    position: relative;
}

.titlo-depoimento {
    background-color: #0275d8;
    padding-top: 25px;
    padding-bottom: 50px;
    color: #fff;
    margin-bottom: 0;
    font-size: 24px


}

.group-radio,
.contacto-select  {
    width: 49%;
    display:inline-block; 
    vertical-align: top;
}

.group-radio .radio:first-child {
    margin-top: 0;
}

footer {
    margin: 10px 0 0 0;
    padding: 20px;
    background-color: #333;
    color: #fff
}

footer address:last-child {

    margin-bottom: 0;

}

header h1 {
    margin-top: 0;
    margin-bottom: 0;
}
.topCasaFina-banner {
    color: #FFF;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    width: 80%;
    border-radius: 8px;
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.3s;


}

solução!

por Rodrigo Lessa Rodrigues

| 129.2k xp | 5 posts

07/11/2017

Experimenta colocar o código JS dentro desse código aqui:

$(document).ready(function() {

});

Isso garante que o Jquery execute quando o documento estiver pronto.

por Natan Souza

| 2101.7k xp | 3699 posts

Instrutor Product Design Lead

07/11/2017

Oi gente,

Achei um probleminha no jQuery tambem:

$('.topCasaFina-banner').css('transform','translate(-50%, 10%');

Reparem que as aspas simples ali no valor do translate precisa englobar o segundo parametro inteiro do método CSS do jQuery, ficaria assim:

$('.topCasaFina-banner').css('transform','translate(-50%, 10%');

Além disso, precisamos fechar também o método CSS do jQuery, então faltou um ) ali no final:

$('.topCasaFina-banner').css('transform','translate(-50%, 10%)');

Espero ter contribuído,

Abcs!

PRORROGAMOS O DESCONTO!