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

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 节开始的标题徽标。

第 1 部分将是照片背景 - 但第 2/3/4 页 - 我想要一个标题 div/image 固定为 pages/section 滚动。

这可能吗？

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

谢谢

Answer 1

您可以使用一行 css

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

如果您想使用 css-animation 得到 transition 或 delay

，您可以对其进行动画处理

见CODEPEN

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

how to set up a fixed position image in a one page layout

html

javascript

css

fullpage.js