吸顶:
可以防止滚屏过程中,代码被多次调用
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var TIMER;//定义全局变量 $(window).scroll( function() { clearTimeout(TIMER);//必须要有这句 if( $(document).scrollTop() > 0 ){ TIMER = setTimeout(function(){ $("#aaa").addClass("abc");console.log($(document).scrollTop()); },100); }else{ TIMER = setTimeout(function(){ $("#aaa").removeClass("abc"); },100); } }); }); </script> <style type="text/css"> html,body{margin:0;padding:0;} #aaa{width:100%;height:40px;line-height:40px;background:#3399cc;} .abc{position:fixed;left:0;right:0;top:0;} </style> <div id="aaa">aaaaaaa</div>
吸顶灯小插件(自己写的):2016-1-14
http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html 理解jquery的$.extend()、$.fn和$.fn.extend()
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ //吸顶灯小插件 $.fn.ceilling = function(options) { var _THIS = this; var _classname = options.classname;//定义定时器 var TIMER = null;//定义定时器 $(window).scroll( function() { var m =$(document).scrollTop(); clearTimeout(_THIS.TIMER);//必须要有这句 if(m>0){ _THIS.TIMER = setTimeout(function(){ $(_THIS).addClass(_classname); },100); }else{ _THIS.TIMER = setTimeout(function(){ $(_THIS).removeClass(_classname); },100); } }); }; $("#aaa").ceilling({"classname":"xiding"}); }); </script> <style type="text/css"> html,body{margin:0;padding:0;} #aaa{width:100%;height:40px;line-height:40px;background:#3399cc;} .xiding{position:fixed;left:0;right:0;top:0;} </style> <div id="aaa">吸顶灯小插件</div>
..