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

我正在使用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

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

回答

相关问题