jquery插件学习之元素顶部悬浮
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({width:"1024px"});//top:原始高度,pos:position的类型,width:到达顶部后的宽度,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类型 width:"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({width:options.width}); } }else{ obj.css({ top:options.top, position:"" }); obj.stop().animate({width:options.oWidth}); } }); } }); })(jQuery);
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步