Jump to content

Footer Reveal on Scroll

Recommended Posts

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

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Link to comment
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!

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 weeks later...
  • 3 weeks later...
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;
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

Link to comment
  • 2 weeks later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

Screenshot 2021-03-23 at 10.50.40.png

Link to comment
  • 1 month later...

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

 

 

 

Link to comment

@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;
        }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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%);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
  • 1 month later...
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

Link to comment
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/


 

Edited by ievavi
Link to comment
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!!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.