代码：jquery小效果—— 吸顶

 

吸顶：

可以防止滚屏过程中，代码被多次调用

<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>

 

 

 

..