2016-04-11 35 views
0

我擁有了一切工作只是我的菜單和定位點很好,但加入如下代碼的鏈接停止工作後:錨點使用全頁onLeave不工作

$('#fullpage').fullpage({ 
    onLeave: function(index, nextIndex, direction){ 
     var leavingSection = $(this); 

     //after leaving section 2 
     if(index == 1 && direction =='down'){ 
      $('header').addClass('active'); 
     } 

     else if(index == 2 && direction == 'up'){ 
      $('header').removeClass('active'); 

     } 
    } 
}); 

我的目的是爲了隱藏我的頭,只在第二部分後顯示,發生這種情況,但錨點不再工作。

我的頭HTML

<header> 
    <ul id="myMenu"> 
     <li data-menuanchor="topo" class="active"><a href="#topo"><img src="img/dcb-white.svg"></a></li> 
     <li data-menuanchor="contato"><a href="#contato">Contato</a></li> 
     <li data-menuanchor="sobre"><a href="#sobre">Sobre Mim</a></li> 
     <li data-menuanchor="historico"><a href="#historico">Histórico</a></li> 
     <li data-menuanchor="portfolio"><a href="#portfolio">Portfolio</a></li> 
     <li data-menuanchor="topo" class="active"><a href="#topo">Topo</a></li> 
    </ul> 
</header> 

頁眉CSS

header{ 
    position:fixed; 
    height: auto; 
    display:block; 
    width: 100%; 
    background: #000; 
    z-index:9; 
    text-align:center; 
    color: #fff; 
    top:0px; 
    visibility: hidden; 
    opacity: 0; 
    -webkit-transition: all 0.8s; 
    -moz-transition: all 0.8s; 
    transition: all 0.8s; 
} 

header.active { 
    visibility: visible; 
    opacity: 1; 
    -webkit-transition: all 0.8s; 
    -moz-transition: all 0.8s; 
    transition: all 0.8s; 
} 

回答

0

那麼,基本上你沒有告訴fullpage。你想要使用錨點。

您必須在初始化(您沒有使用)中使用anchors選項,或者在每個部分中使用data-anchor屬性。 (看起來你並沒有使用)

瞭解更多關於它in the documentation

錨:(默認[])定義錨鏈接(#示例)將要在URL爲每個截面中示出。錨點的價值應該是獨一無二的。陣列中錨的位置將限定錨被應用於哪些部分。 (第二部分的第二個位置等)。通過瀏覽器也可以使用錨點向前和向後導航。該選項還允許用戶爲特定部分或幻燈片添加書籤。小心!錨點不能與站點上的任何ID元素(或IE的NAME元素)具有相同的值。現在可以通過使用屬性data-anchor在HTML結構中直接定義錨點,如此處所述。