How to create a sticky footer that reveals on scroll - Theme Prestige

[Fouc_the_Great]

Hello guys !

As mentioned in the title, I am looking for a way to implement a sticky footer that reveals when I scroll. I am on shopify and I use the prestige theme.
To give you a visual exemple of what I am looking for, here is a link of a site that has exactly what I want:
https://www.chanel.com/en_WW/fashion.html

Thank you all in advance !

Fouc

[OpenThinking]

Hi there,
Jack from OpenThinking here!

Here's the code to achieve a "footer that reveals on scroll":

CSS:

main {
  /* make sure to cover the screen */
  min-height: 100vh;

  /* need a solid bg to hide the footer */
  background: white;

  /* put it on top */
  position: relative;
  z-index: 1;

  padding: 2rem;
}

footer {
  /* place on the bottom */
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #252a47;
  display: grid;
  place-items: center;
  padding: 50px; /* depends on the height of your footer content */
}

here's a working demo: https://jsfiddle.net/fhLwbyox/ 


let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

[Fouc_the_Great]

Hi Jack, thanks for your answer, unfortunately it didn't do it for me, I just added those lines, but it only added padding to the sides of my pages.

Thank you

[OpenThinking]

try this

main { position: relative; z-index: 9; background-color: white; }
#section-footer { position: sticky; bottom: 0; z-index: 1; }

[Fouc_the_Great]

Well it doesn't work, annoying cause when I read the lines of code you've provide me, they seem to make perfectly sense, but I don't know why I doesn't have the required effect 😕

[OpenThinking]

You've to put the code inside your theme.scss.liquid file (or whatever it is called in your theme) at the very bottom. 

[Fouc_the_Great]

I did, i did but it doesn't work

[OpenThinking]

That's strange!

Try putting !important at the end like so;

main { position: relative!important; z-index: 9!important; background-color: white!important; }
#section-footer { position: sticky!important; bottom: 0!important; z-index: 1!important; }

[Fouc_the_Great]

Ok, after way to much time I think I finally got it, I ended up with this, seems to work

body {
  padding-bottom: 240px!important;
  background: white;
}
main{
  min-height:100vh!important;
  background: white;
  z-index:1;
}
#section-footer {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:230px;
  background: white;
  z-index:-1;
}

[Jayem]

Sorry to dig up an old thread, but how would be the best way to implement this on Debut theme?