zoukankan      html  css  js  c++  java
  • 【JQuery插件】元素根据滚动条位置自定义吸顶效果

    ;(function($){
        $.fn.extend({
            /*
            元素根据滚动条位置自定义吸顶插件 
            @defaultTop 初始化top位置
            @startTop 开始滚动和回复原样的位置
            @demo
                var ensureTop = $('#ensure').offset().top;
                $('#columnFloat').setScroll({
                    defaultTop: ensureTop,//需要设置的默认起始top位置
                    startTop: ensureTop//从什么位置开始执行事件
                });
            */
            setScroll:function(opt){
                if($(this).length<1 || !opt.startTop){return;}
                var isIE6 = !-[1,]&&!window.XMLHttpRequest,
                    Timmer= null,
                    $this = $(this),$win = $(window),
                    startTop = opt.startTop;
                /*初始化top位置*/
                if(opt.defaultTop){$this.css('top',opt.defaultTop);}
    
                /*开始滚动和回复原样的位置*/
                $win.bind('scroll',function(){
                    if(Timmer){clearTimeout(Timmer);}
                    Timmer = setTimeout(function(){
                        if($win.scrollTop()>=startTop){/*开始执行事件*/
                            if(isIE6){
                                $this.css({'position':'absolute','top':$win.scrollTop()});
                            }else{
                                $this.css({'position':'fixed','top':0});
                            }
                        }else{
                            $this.css({'position':'absolute','top':opt.startTop});
                        }
                    },40);
                    
                });
            }
        });
    

      

  • 相关阅读:
    Python统计nginx日志域名下载量
    如何使用MySQL自动化备份脚本添加备份任务
    迁移数据库报错
    cobbler
    Zabbix添加nginx-php监控
    Zookeeper运维问题集锦
    Jira+Wiki配置手册
    Gitlab安装恢复手册
    Glusterfs配置手册
    k8s的认证-RBAC机制
  • 原文地址:https://www.cnblogs.com/dtdxrk/p/4029006.html
Copyright © 2011-2022 走看看