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

Question

我正在使用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節以后的標題標識。

Section1將是一個照片背景 - 但是第2/3/4頁 - 我想要一個標題div / image固定為頁面/部分滾動。

那可能嗎 ？

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

謝謝

Answer 1

您可以使用單行css實現此目的

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

如果要使用css-animation進行transition或delay可以為其設置動畫

見CODEPEN