Hi Thomas. I'm struggling a bit to see the point ... Your logo is attached top of screen, and as soon as one scrolls just past the logo height, it is out of view anyway. What is the point in shrinking the logo past this point? At best, you could achieve a shrink effect while scrolling from the very top until the logo is outside of scroll view. Also, you would have to user a transform:scale() CSS effect (not padding/margin), because you would not want to scale the logo while affecting the rest of the page ... That would cause "jerkiness".
Also, you should make sure to consider how it will look/work on all screen sizes.
It should not be too difficult to achieve. You would need a window scroll listener, which simply sets CSS transform scale on the logo element on scroll. Then when scroll gets past a certain value, the function doesn't do anything (you don't want to be triggering a rather heavy function all the time on page scroll).