How to animate resize smaller logo image on scroll?

Question

I was able to figure out how to animate header resize on scroll. However, I can't seem to figure out how to also animate a header logo image to make it smaller on scroll. Any help to modify the code below would be greatly appreciated. Thanks.

Answer 1

I would first of all change a bit your HTML like so:

 <header>
     <div id="logo">
         <img src="https://www.computerhope.com/cdn/computer-hope.jpg">
     </div>
 </header>

And change you css to this:

#logo 
{
   width:200px;/*give it a fixed size*/
   margin:0 auto;
   /* animation magic */
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out ;
   -ms-transition: all 1s ease-in-out ;
   -o-transition: all 1s ease-in-out ;
   transition: all 1s ease-in-out ;
}

#logo img 
{
   width:100%;
   height:auto;
}

header 
{
   width: 100%;
   padding: 30px 0;
   background: #000;
   border-bottom: 1px solid #fff;
   z-index: 9999;
}

.shrink 
{
   width:100px;/*change the size here*/
}

Change your jQuery to this:

$(document).on("scroll", function(){
    if($(document).scrollTop() > 100)
    {
       $("#logo").addClass("shrink");
    }
    else
    {
        $("#logo").removeClass("shrink");
    }
});