首页 > 代码库 > 吸顶效果插件
吸顶效果插件
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; } }
吸顶效果插件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。