Javascript 向下滚动时，我无法缩小页面标题

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

你们能告诉我我做错了什么吗

这是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[id=tinyHeader]，而是在CSS上使用tinyHeader。其次，在一个元素上不应该有两个唯一的ID。改用类。@Hubrid我同意，我也会写tinyHeader，但实际原因是什么？引用CSS文件中元素的ID是公认的方式。它的可读性也比手动引用id属性要好得多。虽然您的代码可以进行一些重构，但效果很好：您是否检查了控制台中代码的其他地方是否有错误？看看@Rorymcrossan的小提琴……看起来不错。

<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>

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