如何在單頁佈局中設置固定位置圖像

我正在使用fullpage.js組件進行單頁設計。代碼是這樣的...如何在單頁佈局中設置固定位置圖像

<div id="fullpage"> 
    <div class="section" id="section1">Some section</div> 
    <div class="section" id="section2">Some section</div> 
    <div class="section" id="section3">Some section</div> 
    <div class="section" id="section4">Some section</div> 
</div>

我想建立一個固定的圖像 - 這是從第2節開始的標題標誌。

第1部分將是照片背景 - 但是第2/3/4頁 - 我想要一個標題div /圖像作爲頁面/部分滾動來修復。

這可能嗎？

codepen：http://codepen.io/anon/pen/OXMgmV

感謝

來源

2016-06-09 hypermails

檢查[在fullpage.js中可用的示例]（http://alvarotrigo.com/fullPage/examples/fixedHeaders.html）。 – Alvaro

爲此，可以使用的css

.fp-viewing-0 .title.fixed{ 
    visibility: hidden; 
}

單行，如果你想使用css-animation有transition或delay

您可以製作動畫實現

查看CODEPEN

來源

2016-06-10 10:42:02

這很有效...一個問題 - 有沒有什麼辦法讓外觀變得更加優雅？像不透明明智等？ – hypermails

@hypermails是的。我將更新Codepen並回復給您。 –

據我所知，在fullpage.js中有一個名爲onLeave的回調函數。你可以使用它。當您離開第一部分時，您可以爲隱藏圖像添加簡單的fadeIn或slideDown jquery特效，當您返回第一頁時，您可以隱藏圖像。 [回調函數爲fullpage.js] [1] [1]：https：//github.com/alvarotrigo/fullPage.js#callbacks – u238

如何在單頁佈局中設置固定位置圖像

回答

相關問題