zoukankan      html  css  js  c++  java
  • 代码: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>

    ..

  • 相关阅读:
    array with objects sort
    Vue组件之区域滚动
    ajax跨域请求问题总结
    常见contentType
    Sublime Text 3实用快捷键大全
    具有层级关系的扁平化数组转化成树形结构数组
    阿里云地图选择器
    前端解析二进制文件流并下载
    tool.js日常工具方法
    git操作
  • 原文地址:https://www.cnblogs.com/qq21270/p/5128725.html
Copyright © 2011-2022 走看看