Apos adicionar o efeito de Parallax, ao clicar em qualquer ancora ele salta normalmente para o ponto, mas ao tentar dar scroll na pagina fica "voltando" no ponto da ancora, ou seja, fica "travado" no ponto.
O Site é dividido basicamente em dois blocos, o primeiro (back) e o segundo logo abaixo que tem o efeito de passar sobre o primeiro (base). Segue o css
#site { perspective: 1px; height: 100%; overflow-x: hidden; overflow-y: auto; } .parallax__layer--back { transform: translateZ(-2px) scale(3);} .parallax__layer--base { transform: translateZ(0);}
Gostaria de saber como funcionam as ancoras, para setar uma altura manualmente via JS.
Segue Html:
<a name="home"></a>
<!-- Topo -->
<div class='nopad container-fluid parallax__layer parallax__layer--back'>
<div id='imagem_inicio'></div>
<div id='conteudo_inicio'>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu1" style="border-style: none;">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="texto_subtitulo collapse navbar-collapse" id="menu1">
<ul class="nav navbar-nav navbar-right barra1">
<li><a href="#home">HOME</a></li>
<li><a href="#sobre">SOBRE</a></li>
<li><a href="#produtos">PRODUTOS</a></li>
<li><a href="#contato">CONTATO</a></li>
</ul>
</div>
</div>
</nav>
<div id='logo'></div>
<div id="letreiro" class="carousel slide" data-ride="carousel">
<div class="carousel-inner tamanho_banner" role="listbox">
<div class="item active">
<span>texto1.</span>
</div>
<div class="item">
<span>texto2.</span>
</div>
<div class="item">
<span>texto3.</span>
</div>
</div>
</div>
</div>
</div>
<div class="parallax__layer parallax__layer--base" >
<div id='conteudo_site' style='background-color: white'>
<!-- Sobre -->
<div class="container-fluid" style="margin-top: 100px;">
<a name="sobre"></a>
<div class="row">
<div class="texto_titulo col-xs-12 col-xs-offset-0 col-sm-6 col-sm-offset-3 col-lg-6 col-lg-offset-3">
<p>Texto.</p>
</div>
</div>
</div>
</div>
</div>
Segue tambem o JQuery que da o tamanho da imagem e do conteudo de inicio, talvez seja relevante.
var h = window.innerHeight; $("#imagem_inicio, #conteudo_inicio").css("height", h);
Obrigado desde já!