Making logo shrink on scroll - how to adjust where in the scroll this happens

Hello,

Based on a helpful suggestion in an older thread, I added the following custom CSS to make my logo shrink upon scrolling down the page:

.site-logo {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.float-header .site-logo {
max-height: 100px;
}

This works fine, but I’d like to make the “shrink” happen sooner in the page scroll. For example, right now I have to do two “clicks” of my mouse’s navigation wheel down the page before the shrink happens. That makes the scroll process appear jumpy because on the first click, the page title jumps behind the sticky menu, and then it pops back out on the second click once the logo has shrunk. I’m thinking it might help if I could add something to this code to make the shrink happen after only one “click” worth of downward scrolling. Is there a way to do this? Thanks so much!

Hello there,

To accomplish it, please follow the following 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($) {

   'use strict'

   $(window).on('load scroll', function() {
     var y = $(this).scrollTop();
     if ( y >= 5 ) {
       $('.site-header').addClass('float-header-2');
     } else {
       $('.site-header').removeClass('float-header-2');
     }
   });

})(jQuery);

  1. Update
  2. Apply the following CSS code into Appearance > Customize > Addition CSS:

.float-header-2 .site-logo {
    max-height: 100px;
}

Regards,
Kharis

This worked perfectly, Kharis! Thank you so much for providing the solution.

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