Show footer after first scroll

Hi Support Team,

I have a sticky footer on my site: but I like to hide the footer at the start and show the footer after the first scroll. See: to show what I mean.

Hope you can help me with a CSS code to achieve this effect.

Thanks & regards,

Hello Jan,

Replace your custom CSS for footer with this one:

.site-footer {
bottom: 0;
width: 100%;
z-index: 999999;
height: 20px;

.site-footer.fixed {
position: fixed;

Then do these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

     $(window).scroll(function() {
       if ( $(this).scrollTop() > 150 ) {
       } else {


4 . Update

Clear any applied cache before reloading your site, as it blocks new code additions to take effect.


Hi Kharis,

Thanks, the effect I needed works but how can I change the height of the footer because the footer is much too height now.

Thanks in advance.

Best regards,

Hello there,

Please try adding this extra custom CSS code:

    .site-footer {
      padding: 10px 0 25px 0;

      margin-top: 0;


Thanks Kharis,

Works fine.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.