首页 > 代码库 > 吸顶效果插件

吸顶效果插件

function Topfixed(options){    var opts = $.extend({        id:‘#topFixed‘,        fixedClass:‘top-fixed‘    },options);    var fixed = $(opts.id);//获取吸顶目标ID对象    var marginBottom = parseInt(fixed.css(‘marginBottom‘)) || 0;//吸顶目标的下边距    //var blank = document.createElement(‘div‘);//创建空div    var blank = $(‘<div></div>‘);//两种创建空DIV的方式    var height = parseInt(fixed.outerHeight()+marginBottom-2);//目标元素的高度+下边距    var scrolltop = $(window).scrollTop();//获取滚动条的滑动距离    var fixedClass = opts.fixedClass;//获取默认的类名,与$(opts.id)不同,$(opts.id)获取的是对象;opts.fixedClass获取的是名称    fixed.after(blank);//在吸顶目标外面的后面加空DIV    $(blank).css({        "height":height//空DIV的高度=目标ID元素的高度+下边距    }).hide();//将空DIV隐藏,即正常时不显示    this.init = function(){        _show();        $(window).scroll(function(){            scrolltop = $(window).scrollTop();            _show();        });    }    function _show(){        if(scrolltop>47){//滚动条滚过的长度大于吸顶元素距离top的长度。47怎么得到的?            fixed.addClass(fixedClass);//目标吸顶元素增加类:fixedClass,该类在common.less中做了定义            $(blank).show();//显示出空DIV,由于position的缘故,空div相当于占位符,放在了吸顶目标的下面。        }else{            fixed.removeClass(fixedClass);            $(blank).hide();        }    }}

html文件中对应的调用是:

<script type="text/javascript" src="js/topfixed.js"></script><script>    new Topfixed().init();</script>

css文件对应的top-fixed为:

top-fixed{        position: fixed;        top: 0;        left: 0;        z-index: 100;        width: 100%;        .top-con{            margin: 0 20px;            border-bottom: 1px solid #ccc;        }    }

 

吸顶效果插件