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

Question

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

thanks

Answer 1

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

See the CODEPEN