0

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á!

6
  • Posta o HTML também da pagina. 9/11/2015 às 17:39
  • Postado amigo :) 9/11/2015 às 18:01
  • Está estranho isso: 9/11/2015 às 18:19
  • <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> 9/11/2015 às 18:19
  • Tente colocar em buttons separados 9/11/2015 às 18:19

2 Respostas 2

2

De forma resumida, seguindo a definição da w3c o elemento <a> (âncora) quando possui um atributo href="" com valor #identificadorrefere-se a outro elemento dentro do mesmo documento que possua um atributo id ou name com o valor referenciado id="identificador". A W3C reforça que estes atributos devem ter um valor único.

Efeito "Salto" da âncora:

Após fazer alguns testes, identifiquei que ao saltar para o ponto onde se encontra o identificador, o scroll no eixo y é setado com o valor do topo da página até o elemento, valor este identificado através do método elementoHTML.offsetTop;.

Desenvolvi está função que aparentemente faz a mesma coisa que o atributo href="#identificador".

function anchorTo(elem) {
    var toElem = elem.getAttribute('anchor');
    var getTop = document.getElementById(toElem).offsetTop;
    window.scrollTo(0, getTop);
}

Resumindo: Está função pega o valor no atributo anchor(declaro manualmente) do elemento que a chamou, valor referente ao identificador do elemento que receberá o salto, busca o offsetTope atribui ao y de scrollTo(x, y).

Espero que tenha ficado claro e possa te ajudar, obrigado.

Veja funcionado aqui no jsfiddle.

Referência: W3C - Anchors

0
0

Muito obrigado pelas informações, ajudaram bastante!

Da maneira que esta não havia funcionado, ele pegava o valor de Y mas nao chegava a fazer o scroll. Colocando como animate funcionou perfeitamente e ainda deu o efeito de ancora suave.

A function ficou assim:

function anchorTo(elem) {
    var toElem = elem.getAttribute('anchor');
    var getTop = document.getElementById(toElem).offsetTop;
    $('#site').animate({scrollTop: getTop}, 700);    
}

Sendo que "#site" é uma div que abrange todo o conteúdo, o problema estava no "window" que não estava pegando.

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 .