javascript - 根据 scrollTop 值缩小标题高度和填充

Question

嗨，我从另一个问题中得到了这段代码，效果很好。我唯一的问题是padding-top我正在使用它的标题中添加了。我希望填充与高度一起减少到没有填充的点，我不知道如何将该属性添加到此代码中。有人可以帮忙吗？我希望它们以相同的速度减少，以便内容保持垂直居中。

初始padding-top设置为此padding: 40px 0 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();

这是我得到初始 jquery 的问题：Shrink header height by scrollTop value

Answer 1

这个如何？演示http://jsfiddle.net/yyene/xaDLy/1/

您可以轻松维护 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);
    }
});