Javascript 基于scrollTop值收缩页眉高度和填充

嗨，我从另一个问题得到了这个代码，它工作得很好。我唯一的问题是，我使用的标题中添加了

padding top

。我希望填充随着高度的增加而减少，直到没有填充为止，我不知道如何将该属性添加到此代码中。有人能帮忙吗？我希望它们以相同的速度减少，以便内容保持垂直居中

初始

padding top

设置为该

padding:40px 0

这是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();

var header=$（'#main'），
headerH=收割台高度（）；
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）这个怎么样？演示

您可以轻松地维护css属性

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);
    }
});