代碼：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>

 

 

 

..