讓文檔某一塊區域 智能浮動

　　這個插件原理非常簡單，隻需要獲得兩個分界點：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));
    });
};      

 示範效果