Javascript实现scroll时固定html元素

代码如下:

(function($){
    var $window = $(window);

    function createFixedCss(name, top) {
        var doc = document,
            heads = doc.getElementsByTagName("head"),
            style = doc.createElement("style"),
            cssText = "." + name + "{ position: fixed!important; top: " + top + "px!important; }";

        style.setAttribute("type", "text/css");
        if (style.styleSheet) {
            style.styleSheet.cssText = cssText;
        } else {
            style.appendChild(doc.createTextNode(cssText));
        }

        (heads.length ? heads[0] : doc.documentElement).appendChild(style);
    }

    $.fn.fixedTo = function ($container, distance) {
        var $this = this,
            cssName = "fixed" + Math.floor(Math.random()*1000000),
            distance = distance || 0,
            scroll = 0,
            offsetTop = distance;

        if ($container) { // container is a div element
            if (!($container instanceof $)) {
                $container = $($container);
            }
            scroll = ($this.offset().top - $container.offset().top) - distance;
            offsetTop = $container.offset().top + distance;
        } else { // container is window
            $container = $window,
            scroll = $this.offset().top - distance;
        }

        createFixedCss(cssName, offsetTop);

        $container.scroll(function(e) {
            var scrollTop = $container.scrollTop();
            $this.toggleClass(cssName, scrollTop > scroll);
            return true;
        });
    };

})(jQuery);