Javascript實現scroll時固定html元素

代碼如下:

View Code

 1 (function($){ 2     var $window = $(window); 3  4     function createFixedCss(name, top) { 5         var doc = document, 6             heads = doc.getElementsByTagName("head"), 7             style = doc.createElement("style"), 8             cssText = "." + name + "{ position: fixed!important; top: " + top + "px!important; }"; 9 10         style.setAttribute("type", "text/css");11         if (style.styleSheet) {12             style.styleSheet.cssText = cssText;13         } else {14             style.appendChild(doc.createTextNode(cssText));15         }16 17         (heads.length ? heads[0] : doc.documentElement).appendChild(style);18     }19 20     $.fn.fixedTo = function ($container, distance) {21         var $this = this,22             cssName = "fixed" + Math.floor(Math.random()*1000000),23             distance = distance || 0,24             scroll = 0,25             offsetTop = distance;26 27         if ($container) { // container is a div element28             if (!($container instanceof $)) {29                 $container = $($container);30             }31             scroll = ($this.offset().top - $container.offset().top) - distance;32             offsetTop = $container.offset().top + distance;33         } else { // container is window34             $container = $window,35             scroll = $this.offset().top - distance;36         }37 38         createFixedCss(cssName, offsetTop);39 40         $container.scroll(function(e) {41             var scrollTop = $container.scrollTop();42             $this.toggleClass(cssName, scrollTop > scroll);43             return true;44         });45     };46 47 })(jQuery);