jquery实现网页下拉后元素顶部固定（附代码）

jquery实现网页下拉后，元素固定到顶部效果。

一个本身不在页面顶部的元素，当页面滚动到其所在位置时，变为顶部固定。

没有找到此类插件，于是自己写了个， 很简单，没几行代码，兼容IE6+，firefox，safari，chrome

具体效果见右侧分类widget。

附代码如下

$(".fixed-content").each(function(){
    var o = this;
    var timeout = null;
    var offset_top = $(o).offset().top;
    $(o).css({
        "width": $(o).width(),
        "height": $(o).height()
    });
    $(window).scroll(function(){
        clearTimeout(timeout);
        if($("body").get(0).getBoundingClientRect().top <= -(offset_top + 10)){
            if($.browser.msie && $.browser.version < 8){
                timeout = setTimeout(function(){
                    $(o).css({
                        "position": "absolute",
                        "z-index": 1000,
                        "left": $(o).offset().left
                    })
                    .animate({
                        "top": - $("body").get(0).getBoundingClientRect().top
                    })
                    .addClass("col-fixed");
                }, 200);
            }else{
                $(o).css({
                    "position": "fixed",
                    "top": 0,
                    "z-index": 1000,
                    "left": $(o).offset().left
                })
                .addClass("col-fixed");
            }
        }else{
            $(o).css({
                "position": "relative",
                "top": 0,
                "left": 0
            })
            .removeClass("col-fixed");
        }
    });
});