Shrink header height and padding based on scrollTop value

Question

Hi I got this code from another question and it works great. The only problem that I have is that there is padding-top added to the header I am using it on. I would like the padding to decrease along with the height to the point where there is no padding, I don't know how to add that attribute to this code. Can someone help? I would like them to decrease at the same rate so the content stays centered vertically.

the initial padding-top is set to this padding: 40px 0 0;

here is the jquery

var header = $('#main'),
    headerH = header.height();

$(window).scroll(function() {
    if ($(this).scrollTop() <= headerH / 2) {
        header.css({
            height: -($(this).scrollTop() - headerH)
        });
    } else {
      header.css({
            height: headerH / 2
        });
    }
}).scroll();

here is the question i got the initial jquery from: Shrink header height by scrollTop value

Answer 1

What about this one? DEMO http://jsfiddle.net/yeyene/xaDLy/1/

You can maintain css properties easily.

var header = $('#main'),
    headerH = header.height();

$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
          header.stop().animate({
            padding: '10px 0px 10px 0px'
          }, 300);
    } else {
          header.stop().animate({
            padding: '40px 0 40px 0'
          }, 300);
    }
});