2016-02-27 147 views
0

我遇到了問題fullPage.js。我的菜單沒有停留在網站頂部,而是向下滾動時消失。儘管如此,幻燈片有一個偏移量,但菜單不存在。這裏是我的代碼:fullPage.js菜單消失

<body> 
    <ul id="menu"> 
     <li><a href="#firstPage">firstPage</a></li> 
     <li><a href="#secondPage">secondPage</a></li> 
     <li><a href="#thirdPage">thirdPage</a></li> 
    </ul> 
    <div id="fullpage"> 
     <div class="section">Some section</div> 
     <div class="section">Some section</div> 
     <div class="section">Some section</div> 
    </div> 
</body> 

初始化:

$(document).ready(function() { 
    $('#fullpage').fullpage({ 
     scrollingSpeed: 300, 
     menu: '#menu', 
     anchors:['firstPage', 'secondPage', 'thirdPage'] 
    }); 
}); 

在CSS,我已刪除任何可能造成的麻煩,但這裏是它:

.section{ 
    background-color: olive; 
    z-index: -1; 
} 
.section:nth-child(2n){ 
    background-color: orange; 
} 

這張截圖顯示,導航在開始時正確顯示。當您向下滾動時,它會消失,但導航通常位於頂部的間隙仍然存在。我嘗試手動設置位置:固定到導航,這種方式並沒有消失,但鏈接werent可點擊。

問題:部分放置在菜單上方。

回答

0

你需要使用一個固定的定位菜單。類似這樣的:

#menu{ 
    position:fixed; 
    z-index: 99; 
    top: 20px; 
    left: 20px; 
} 

您可以在fullpage.js online examples中清楚地看到這一點。