让文档某一块区域 智能浮动

　　这个插件原理非常简单，只需要获得两个分界点：startHeight和maxHeight，当窗口滚动到startHeight的时候，设定元素的position:fixed，top:0，当窗口滚动到maxHeight的时候，设定元素的position:absolute，top:maxHeight，这样就可以达到这个效果：当窗口滚动到startHeight的时候，元素会被固定在整个窗口的顶部，不会跟随窗口的滚动而滚动，当窗口滚动到maxHeight的时候，元素就会被固定在当前相对于整个文档的位置，重新跟随窗口滚动而滚动。

　　需要注意的是，一般插件都是在文档加载完之后调用一次，这样当页面文档结构发生变化，且页面没有重新载入的情况下，startHeight和maxHeight的值都不会被重新计算，这样浮动的起始就会和新的结构不相符，看起来很别扭。为了解决这个问题，在更改页面之后，一定要记得重新调用一次这个插件！

$.fn.smartFloat = function (options) {

    var ele = $(this);

    var eleHeight = ele.outerHeight(true);


    var defaults = {
        startHeight: ele.parent().offset().top,//最好元素外面包含一个父节点，父节点的offset要和此元素一致，不要有padding，以防页面无刷新结构变化且元素已经出于fixed状态，获取初始高度不准确的情况
        maxHeight: $("#footer").offset().top - 25 - eleHeight//最大浮动的值，超过此值之后，元素定位改变成absolute，跟随scroll滚动而滚动
    };

    var opts = $.extend({},defaults, options);


    var position = function (element) {
        

        $(window).scroll(function () {
            var scrolls = $(this).scrollTop();
            if (scrolls > opts.startHeight && scrolls < opts.maxHeight) {
                if (window.XMLHttpRequest) {
                    element.css({
                        position: "fixed",
                        top: 0
                    });
                } else {
                    element.css({
                        top: scrolls
                    });
                }
            } else if (scrolls > opts.maxHeight) {
                element.css({
                    position: "absolute",
                    top: opts.maxHeight - opts.startHeight
            });
            } else {
                element.css({
                    position: "static",
                    top: 0
                });
            }
        });
    };
    return $(this).each(function () {
        position($(this));
    });
};

 演示效果