javascript - 如何在一页布局中设置固定位置图像

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 部分开始的标题 Logo 。

第 1 节将是照片背景 - 但第 2/3/4 页 - 我希望在页面/部分滚动时固定标题 div/图像。

这可能吗？

代码笔:http://codepen.io/anon/pen/OXMgmV

谢谢

Answer 1

您可以使用一行 css 实现此目的

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

如果你想使用css-animation，你可以让它动起来有 transition 或 delay

参见 CODEPEN