Footer Reveal on Scroll

Site URL: https://www.ievaviphoto.com

Hello, there!

I'm trying to achieve a similar result to one in the example (parallax footer / slide out footer upon scroll). May anyone would be able to give a hand?

Example: https://yatesdesign.com.au/divi-tutorial-reveal-footer-scroll/
My site: www.ievaviphoto.com

Thank you!
 

1 hour ago, ievavi said:

Site URL: https://www.ievaviphoto.com

Hello, there!

I'm trying to achieve a similar result to one in the example (parallax footer / slide out footer upon scroll). May anyone would be able to give a hand?

Example: https://yatesdesign.com.au/divi-tutorial-reveal-footer-scroll/
My site: www.ievaviphoto.com

Thank you!
 

Could you try this

@media only screen and ( min-width: 640px ) and ( max-width: 768px ) {
      .Site {
         margin-bottom: 505px; /*This may to be adjusted depending on the content of your footer*/
        }

        .Footer {
         position: fixed;
         z-index: -1;
         height: 505px; /*This may to be adjusted depending on the content of your footer*/
         width: 100%;
         bottom: 0;
        }

        .Footer-inner {
         position: fixed;
         width: 100%;
         bottom: 0;
         padding: 10px 0;
        }
 
}

@media only screen and ( min-width: 768px ) {
      .Site {
         margin-bottom: 605px; /*This may to be adjusted depending on the content of your footer*/
        }

        .Footer {
         position: fixed;
         z-index: -1;
         height: 605px; /*This may to be adjusted depending on the content of your footer*/
         width: 100%;
         bottom: 0;
        }

        .Footer-inner {
         position: fixed;
         width: 100%;
         bottom: 0;
         padding: 10px 0;
        }
 
}

6 hours ago, bangank36 said:

Could you try this

@media only screen and ( min-width: 640px ) and ( max-width: 768px ) {
      .Site {
         margin-bottom: 505px; /*This may to be adjusted depending on the content of your footer*/
        }

        .Footer {
         position: fixed;
         z-index: -1;
         height: 505px; /*This may to be adjusted depending on the content of your footer*/
         width: 100%;
         bottom: 0;
        }

        .Footer-inner {
         position: fixed;
         width: 100%;
         bottom: 0;
         padding: 10px 0;
        }
 
}

@media only screen and ( min-width: 768px ) {
      .Site {
         margin-bottom: 605px; /*This may to be adjusted depending on the content of your footer*/
        }

        .Footer {
         position: fixed;
         z-index: -1;
         height: 605px; /*This may to be adjusted depending on the content of your footer*/
         width: 100%;
         bottom: 0;
        }

        .Footer-inner {
         position: fixed;
         width: 100%;
         bottom: 0;
         padding: 10px 0;
        }
 
}

 

Ba! You are amazing! Thanks so much!! I will keep this post up since I saw other people were looking for a solution 🙂

Best,
Ieva

36 minutes ago, ievavi said:

Ba! You are amazing! Thanks so much!! I will keep this post up since I saw other people were looking for a solution 🙂

Best,
Ieva

you're great!

Where do I put this code? Thanks!

On 2/16/2021 at 10:33 AM, CIW said:

Where do I put this code? Thanks!

 

Add to Design > Custom CSS

@bangank36 Hello! I was wondering if you can tell me why this code isn't working on my site?

https://www.erobertson.design/

I'm using the Jasper (York) template and trying to achieve the same effect. Any pointers would be appreciated.

5 hours ago, e_robertson said:

@bangank36 Hello! I was wondering if you can tell me why this code isn't working on my site?

https://www.erobertson.design/

I'm using the Jasper (York) template and trying to achieve the same effect. Any pointers would be appreciated.

try

#page {
  	margin-bottom: 255px; /*This may to be adjusted depending on the content of your footer*/
}

#footer {
    position: fixed;
    z-index: -1;
    height: 225px; /*This may to be adjusted depending on the content of your footer*/
    width: 100%;
    bottom: 0;
}

@bangank36 Thank you so much – that's worked a treat! Any pointers for how I should adjust this code for mobile?

Do you also know if it's possible to prevent the footer from appearing until the user has scrolled all the way to the bottom of the page? It currently appears as the user approaches the bottom, rather than when the reach the bottom.

On 3/12/2021 at 6:02 PM, e_robertson said:

@bangank36 Thank you so much – that's worked a treat! Any pointers for how I should adjust this code for mobile?

Do you also know if it's possible to prevent the footer from appearing until the user has scrolled all the way to the bottom of the page? It currently appears as the user approaches the bottom, rather than when the reach the bottom.

Hi. Do you still need help on this?

20 minutes ago, tuanphan said:

Hi. Do you still need help on this?

No, but thank you for asking. I fixed the desktop issues by adjusting the #page margin-bottom and the #footer height, and I decided not to have the effect on mobile.

On desktop, the footer appears for a short flicker when the page loads, before disappearing. I have attached a screenshot. Do you know if I can prevent this, or just have to live with it?

Hello @bangank36, I'm trying to achieve the same effect on my page, however it's not working. I tried adjusting the margin too. Can you help please?

https://flower-springtail-8n3z.squarespace.com/ (password: tothemoon)

On 2/1/2021 at 8:53 AM, bangank36 said:

Could you try this

@media only screen and ( min-width: 640px ) and ( max-width: 768px ) {
      .Site {
         margin-bottom: 505px; /*This may to be adjusted depending on the content of your footer*/
        }

        .Footer {
         position: fixed;
         z-index: -1;
         height: 505px; /*This may to be adjusted depending on the content of your footer*/
         width: 100%;
         bottom: 0;
        }

        .Footer-inner {
         position: fixed;
         width: 100%;
         bottom: 0;
         padding: 10px 0;
        }
 
}

@media only screen and ( min-width: 768px ) {
      .Site {
         margin-bottom: 605px; /*This may to be adjusted depending on the content of your footer*/
        }

        .Footer {
         position: fixed;
         z-index: -1;
         height: 605px; /*This may to be adjusted depending on the content of your footer*/
         width: 100%;
         bottom: 0;
        }

        .Footer-inner {
         position: fixed;
         width: 100%;
         bottom: 0;
         padding: 10px 0;
        }
 
}

 

@sumcwan above code for SS 7.0, try change some class to this new code

@media only screen and ( min-width: 768px ) {
      #page {
         margin-bottom: 605px; /*This may to be adjusted depending on the content of your footer*/
        }

        footer.sections {
         position: fixed;
         height: 605px; /*This may to be adjusted depending on the content of your footer*/
         width: 100%;
         bottom: 0;
        }
}

This is perfect! Thank you @tuanphan!

Hello, the code posted worked like a charm but I was wondering if there is a way to put a small shadow on the top of the footer so it really appears as "behind".

Thanks.

On 8/11/2021 at 12:59 AM, DolceCotti said:

Hello, the code posted worked like a charm but I was wondering if there is a way to put a small shadow on the top of the footer so it really appears as "behind".

Thanks.

Hi. Can you share link to your site? We can tweak the code easier

7 hours ago, tuanphan said:

Hi. Can you share link to your site? We can tweak the code easier

Yes, it's private at the moment, password should work.

https://www.dolcecotti.com/
Password: Test1234

On 8/12/2021 at 11:03 PM, DolceCotti said:

Yes, it's private at the moment, password should work.

https://www.dolcecotti.com/
Password: Test1234

Hi. Try this code

footer#footer-sections {
    box-shadow: 0px 0px 15px rgb(0 0 0 / 50%);
}

1 hour ago, tuanphan said:

Hi. Try this code

footer#footer-sections {
    box-shadow: 0px 0px 15px rgb(0 0 0 / 50%);
}

 

Thank you for your help, unfortunately it isn't working.

@RolandFuseHub

The code you cited is not for v7.1 but I believe there were some examples that were provided for v7.1 above.

On 2/1/2021 at 2:16 AM, ievavi said:

Site URL: https://www.ievaviphoto.com

Hello, there!

I'm trying to achieve a similar result to one in the example (parallax footer / slide out footer upon scroll). May anyone would be able to give a hand?

Example: https://yatesdesign.com.au/divi-tutorial-reveal-footer-scroll/
My site: www.ievaviphoto.com

Thank you!
 

Hey Ieva! I was looking for the footer code but took a look at your website - and it's so amazing! Could you share the code you used to make such burger menu on desktop (or the source where you can purchase the code)? Thanks in advance! Kirill

1 hour ago, kirillillenkov said:

Hey Ieva! I was looking for the footer code but took a look at your website - and it's so amazing! Could you share the code you used to make such burger menu on desktop (or the source where you can purchase the code)? Thanks in advance! Kirill

Heey, Kill! Thanks for sweet words — yes, of course! 🙂

Squarestylist's mega menu could be a good starting point and then you can customised according to your needs: https://www.squarestylist.com/shop/mega-menu

If free alternative, this article can be very helpful: https://ryandejaegher.com/how-to-add-a-desktop-burger-to-squarespace-7.1/

 

3 hours ago, ievavi said:

Heey, Kill! Thanks for sweet words — yes, of course! 🙂

Squarestylist's mega menu could be a good starting point and then you can customised according to your needs: https://www.squarestylist.com/shop/mega-menu

If free alternative, this article can be very helpful: https://ryandejaegher.com/how-to-add-a-desktop-burger-to-squarespace-7.1/

 

Thanks a lot!!