Shrink Header Image on Scroll

So there’s two things we need to look out for here. We have to first make sure we specify to jQuery/javascript what it is that we’re selecting. In this code you are targeting the HTML header element and then also targeting ‘site-logo’ but jQuery can’t find an element named ‘site-logo’.

<script>
jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 10) { 
            $('header').addClass('shrink');
        $('site-logo').addClass('shrink');
        }
        else{
            $('header').removeClass('shrink');
        $('site-logo').removeClass('shrink');
        }
    });
});
</script>

The solution requires you to specify what it is you’re targeting and since ‘site-logo’ is a class, you have to preface it with a period, like so:

<script>
jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 10) { 
            $('.header').addClass('shrink');
            $('.site-logo').addClass('shrink');
        }
        else{
            $('.header').removeClass('shrink');
            $('.site-logo').removeClass('shrink');
        }
    });
});
</script>

As some pages may have multiple <header> elements, I’d strongly suggest that you also either target a specific class or ID for your main header unless you want them all to have the ‘shrink’ class applied when scrolling.

The other thing and I’m not sure if this was an issue or not, is that when you’re using CSS transitions, you have to go from value X to value Y. So if your .shrink class is setting max-height:45px, you should make sure the other class specifies a starting point for the same rule, like max-height:75px.

.site-logo img {
  max-height: 75px;
  -webkit-transition:max-height 1s ease-out;
  -moz-transition:max-height 1s ease-out;
  -o-transition:max-height 1s ease-out;
  transition:max-height 1s ease-out;
}
.site-logo.shrink img {
  max-height: 45px;
}