jquery - 在滚动条上调整标题大小

Question

我想在用户滚动时调整页眉的大小，并在页面位于顶部时再次调整它的大小。我有这个示例 HTML

<header class="header">
</header>
<section>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
</section>

这个 CSS

* { margin: 0; padding: 0; }

body {
  height: 1000px;
}

.header {
   width: 100%;
  height: 200px;
  background: red;
  position: relative;
  -webkit-transition: linear .3s;
     -moz-transition: linear .3s;
      -ms-transition: linear .3s;
       -o-transition: linear .3s;
          transition: linear .3s;
}

.test {
  height: 120px;
  position: fixed;
}

我的 jQuery 是 -

$(window).scroll(function(){ 
  if ($(this).scrollTop() > 10){      
    $('.header').addClass("test");
  } 
  else{
    $('.header').removeClass("test");
  }
});

我遇到的问题是，当我滚动 jumps 中的内容到后面时，我看不到它。我不知道我的 HTML/CSS 在这里做错了什么。

有什么想法吗？

编辑:

这是一个带有代码的小 jsfiddle - http://jsfiddle.net/rHmCu/

Answer 1

section 没有定义的位置，所以它位于 .header 后面，所以:

section { 
    position:relative;
}

(我想)

演示:http://jsfiddle.net/pavloschris/rHmCu/3/