jquery插件的学习：
HTML部分及应用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #float{border: 1px solid #e0e0e0; padding: 10px; position: absolute; width: 170px;} </style> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/smartFloat.js"></script> <script> $(function(){ //插件应用 $("#float").smartFloat({"1024px"});//top:原始高度，pos:position的类型,到达顶部后的宽度，oWidth:最初的宽度 }); </script> </head> <body> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="float">我到了顶部就悬浮</div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html>
js部分
/** * Created by Administrator on 14-9-3. */ ;(function($){ $.fn.extend({ smartFloat:function(options){ var defaults = { top:$(this).position().top,//原始高度 pos:$(this).css("position"),//原始的postion类型 "100%", //到达顶部后的宽度 oWidth:$(this).width()//最初的宽度 }; var options = $.extend(defaults,options); var obj = $(this); $(window).scroll(function(){ var scrolls = $(this).scrollTop(); if(scrolls > options.top){ if(window.navigator.userAgent.indexOf('MSIE 6.0')!=-1){ obj.css({top:scrolls}); }else{ obj.css({ position: "fixed", top: 0 }); obj.stop().animate({options.width}); } }else{ obj.css({ top:options.top, position:"" }); obj.stop().animate({options.oWidth}); } }); } }); })(jQuery);