hypermails hypermails - 1 year ago 63
CSS Question

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

I am doing a single page design using a fullpage.js component. the code is something like so..

<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>

I would like to set up a fixed image - which is the title logo from section 2 onwards.

Section1 will be a photo background - but page 2/3/4 - I want to have an a title div/image to be fixed as the pages/section scroll.

Is that possible ?

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


Answer Source

You can achieve this using a single line of css

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

You can animate it if you want using css-animation to have transition or delay