弄乱jquery产生了意想不到的结果

在阅读之前，请注意我是jquery，html和css方面的初学者。

将jquery安装到我的网站之前，我在固定位置有一个页眉和页脚，以便它们粘在浏览器的顶部和底部。当我安装 jquery 时，页眉和页脚由于某种原因消失了。jquery 函数工作正常，因为我用我的函数测试了它。任何人都知道为什么我的页眉和页脚在使用 jquery 时消失了？谢谢：

忽略大部分代码，看看这个jsfiddle：http://jsfiddle.net/w1bpmkn5/

目录：

<div class="header"></div>
<div class="footer"></div>
<script src="jquery-2.1.3.min.js"></script>
<script src="script.js"></script>

.css：

.header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:50px;
    background-color: 1a1a1a;
    z-index: 100;
}
.footer {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:50px; 
    background-color: 1a1a1a;
    z-index: 100;
}

如果需要，jQuery (script.js(：

$(document).ready(function(){
    $(".box").mouseenter(function(){
        $(this).fadeTo("slow", 1);
    });
    $(".box").mouseleave(function(){
        $(this).fadeTo("slow", 0.5);
    });
});