如何在单页布局中设置固定位置图像答案

【问题标题】：how to set up a fixed position image in a one page layout如何在单页布局中设置固定位置图像
【发布时间】：2016-06-09 20:37:20
【问题描述】：

我正在使用 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/图像固定为页面/部分滚动。

这可能吗？

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

谢谢

【问题讨论】：

检查the example available in fullpage.js。

标签： javascript html css fullpage.js

【解决方案1】：

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

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

如果你想使用css-animation 来设置transition 或delay，你可以为它制作动画

见CODEPEN

【讨论】：

这很好用......一个问题 - 有没有办法让外观更优雅？像不透明度等？
@hypermails 是的。我会更新 codepen 并回复你。
据我所知，fullpage.js中有一个名为onLeave的回调函数。你可以使用它。当您离开第一部分时，您可以为隐藏的图像添加简单的fadeIn或slideDown jquery效果，当您返回第一页时，您可以隐藏您的图像。 [fullpage.js 的回调函数][1] [1]：github.com/alvarotrigo/fullPage.js#callbacks