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

这是我从Shrink header height by scrollTop value

获得初始jquery的问题

Answer 1

这个怎么样？ DEMO http://jsfiddle.net/yeyene/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);
    }
});

根据scrollTop值收缩标题高度和填充

1 个答案: