Static top section so next sections overlaps on rollover

[hyperdrive_boom]

Good afternoon,

The first section of each of my pages had a large background image inside it. I would like it so as you scroll it does not move and the following sections on the pages go over the top. Like this but no need for the fading on scroll:

Design Declares | Driftime® Media – A Design and Impact Agency

Parallax does not give the right effect and I thought I had worked it out by doing this css:

.Header-Section .x-bg-layer-lower-image {
  background-attachment: fixed;
}

But it does not work on devices (Ipad, Iphone etc)

I also tried to play with CSS and positioning:

.Header-Section {
position: -webkit-sticky; /* Safari */
  position: sticky;
}

But it did not work

Please assist - thank you!

Jason

[ruenel]

Hello Jason,

Thanks for writing in! You will need the following structure:

DIV positioned as "Fixed" with 100vh height.
    Section 
       Row
          Column
Section 
   Row
     Column
Section 
   Row
     Column

You do not need any custom CSS for this. Just make sure to position the DIV element as “Fixed” and make sure that the z-index of the Sections is much higher than the DIV element.

Hope this makes sense.

[hyperdrive_boom]

Good morning and thank you very much on this update

I think it is almost there but I must be doing something wrong.

I created a DIV and added a row and column - section would not go into it:

DIV positioned as “Fixed” with 100vh height.

I have changed the section 2 to be a higher Z-Index too

This is what I can see:

Its got the height but it is not the full width of the screen and the second section starts already on top of the DIV

Please advise and thank you!
Jason

[marc_a]

Hey Jason,

Please set to make the DIV width to 100%. If you are still having some issues, it would be best if you could share with us your admin credentials. Please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password
• Page URL in question

You can find the Secure Note button at the bottom of your posts.

Thank you.

[hyperdrive_boom]

Good morning and thank you for your help - I believe I have worked it out

By adding Margin-Top of 98vh to the section below it then makes the fixed DIV visible and the effect now works

Thank you!
Jason

[marc_a]

Hey Jason,

That’s great and you’re most welcome!