Show footer after first scroll

Hi Support Team,

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

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

Thanks & regards,
Jan

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
    (function($){

     $(window).scroll(function() {
       if ( $(this).scrollTop() > 150 ) {
         $('.site-footer').addClass('fixed');
       } else {
         $('.site-footer').removeClass('fixed');
       }
     });

    })(jQuery);

4 . Update

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

Regards,
Kharis

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,
Jan

Hello there,

Please try adding this extra custom CSS code:

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

    .site-info,
    .footer-navigation{
      margin-top: 0;
    } 

Regards,
Kharis

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.

Regards,
Kharis