Anchors lock with Parallax effect

Navigation
0

After adding the effect of Parallax, clicking on any anchor it jumps normally to the point, but when trying to scroll the page is "returning" at the point of the anchor, ie it is "locked" in the point. p>

The site is divided basically into two blocks, the first one (back) and the second one just below that has the effect of passing on the first one (base). Follow the 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);}

I would like to know how anchors work, to set a height manually via JS.

Follow 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>

There is also JQuery that gives the size of the image and the content of the start, maybe it is relevant. 


 var h = window.innerHeight;
 $("#imagem_inicio, #conteudo_inicio").css("height", h);

Thank you in advance!

    
asked by anonymous 09.11.2015 / 18:10

2 answers

2

Briefly, following definition of w3c the element <a> ( anchor) when it has an attribute href="" with value #identificador refers to another element within the same document that has an attribute id or name with value referenced id="identificador" . W3C emphasizes that these attributes must have a unique value.

Anchor effect "Jump" :

After doing some tests, I have identified that when jumping to the point where the identifier is located, the scroll on the y-axis is set with the top-of-page value to the element, which value is identified by the% .

I developed this function that apparently does the same thing as the elementoHTML.offsetTop; attribute. 

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

In short, this function takes the value in the attribute anchor (manually declare) of the element that called it, value referring to the identifier of the element that will receive the jump, searches for href="#identificador" and assigns offsetTop y .

Hope it's clear and I can help you, thank you.

  

See how it works here at jsfiddle .

Reference: W3C - Anchors

    
09.11.2015 / 22:43
0

Thanks a lot for the information, it helped a lot!

As it did not work, it took the value of Y but did not do the scroll. Placing as animate worked perfectly and still gave the effect of soft anchors.

The function looks like this: 

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

Since "#site" is a div that covers all content, the problem was in the "window" it was not catching.

    
10.11.2015 / 17:29
How to validate session with AngularJS and PHP? Read XML within Textarea with Jquery