如何固定div在页面顶端，并且当下面的div滑动的时候，添加阴影效果，如同百度搜索一样

引用我之前提出的问题  http://bbs.csdn.net/topics/390964076

我现在有三个div，<div id="top"></div> <div id="middle"></div> <div id="footer"></div>，我想要#top固定在浏览器顶端，#middle里有从数据库读出来的内容，因为很长，所有浏览器会有滚动条，当我滚动滚动条时，像百度这样，顶端#top的内容还在，#middle的内容会滚到#top下面一层去，如图：

问题已经解决了，但这里我想再添加一点，就是当#middle滚动的时候，给#top添加阴影，这样看起来效果就更逼真了，而百度也是这么弄的

给出CSS代码：固定主要是position:fixed，z-index不设置也可以，但是#top一定要有背景颜色

#top
{
    height: 40px;
    width: 100%;
    clear: both;
    padding-top: 10px;
    border-bottom: 1px solid #EBEBEB;
    background-color:#FFFFFF;
    position:fixed;   /* 顶端固定 */
    z-index:100;
}
#middle
{
    width: 100%;
    clear: both;
    z-index:10;
    padding-top:60px;
}

就这样就可以实现#top的固定了，但如果要实现阴影效果，还得给#top添加box-shadow，这里使用jquery判断是否滚动，并何时添加阴影

jquery代码如下：

function downShadow() {
    //获取#middle的位置
    var startPos = $("#middle").offset().top;
    $.event.add(window, "scroll", function () {
        var p = $(window).scrollTop();
        $("#top").css('box-shadow', ((p) > startPos) ? '0 0 5px #888' : '0 0 0 #888');
    });
}

到此阴影效果便也可以实现了，只需在$(document).ready(function(){});中引用downShadow函数即可！