Animação fixar menu não funciona

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!

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;


}

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.

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!