当我向下滚动时，我无法使页面的页眉缩小

Question

我的代码没有发现任何错误。

你能告诉我我做错了吗？

这是JQuery（2.1.1）代码：

$(window).scroll(function () {
    if ($(document).scrollTop() == 0) {
        $('div.header').attr('id', 'header');
    } else {
        $('div.header').attr('id', 'tinyHeader')
    }
});

这是标题div：

的HTML代码

<div class="header" id="header">
 <div id="headerContent">
  <div id="headerLogo">
   <a href="index.php"><span title="Main page"><img src="images/logo.png"></span></a>
  </div>
 </div>
</div>

这是CSS代码：

#tinyHeader {
    background-color: #FFFFFF;
    box-shadow: 0 1px 1px #d2d2d2;
    height: 50px;
    padding: 10px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}
#header {
    background-color: #FFFFFF;
    box-shadow: 0 1px 1px #d2d2d2;
    height: 100px;
    padding: 10px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}
#headerContent {
    margin: auto;
    width: 1360px;
}