如何创建浮动页脚共享栏

CNET社会份额

最近对我们的一个网站进行了重新设计,我的任务是重新创建一个页脚共享栏,当页脚进入视图时,该共享栏将固定/取消固定。现在,我可能没有做过巨大的工作来解释,所以我想告诉你CNET让你知道我想要实现什么。右边有一个截图。

你注意到窗口底部的黑色共享条了吗?现在,滚动到页面底部,注意共享栏是如何停靠在页脚顶部的。酷,正确的?

几个小时后,我能够近距离地复制这个功能,最终我得到了下面的结果。

最佳社会份额

自从我发布了一个代码教程以来,我想告诉你们如何为你们自己的网站做这件事!

让我们从HTML开始

在我们进入任何javascript或css之前,让我们继续插入我们的HTML,这样我们可以有一些东西来处理。现在,因为我们希望在页脚在视图中时将此共享栏停靠到页脚,请务必输入此代码直接地在网站的页脚之前。我提供了的屏幕截图,以显示此代码的正确位置。

代码如下:

            

让我们来看看CSS

仅HTML看起来不那么漂亮,是吗?所以,让我们继续,用一些CSS把它打扮一下!下面是我用来设置社交共享页脚样式的CSS:

.社交链接利润:20px 0px 10px 0px;高度:35px;}.fb浮动:左;右边距:10px;}.googplus float:左;}.tweet float:左;}.linkedinshare float:左;右边距:10px;}.Stumble浮动:左;上边距:2px;右边距:10px;}.socialfooterwrap width:100%;position:relative;bottom:0;left:0;z-index:999;display:none;.social links margin:0 auto;background:url(**your logo image here**)no repeat 20px center 000;border radium:10px 10px 0px 0px;box shadow:0-1px 1px 524c4c;border top:1px solid 999;width:268px;max width:100%;position:relative;padding:12px0 0 140px;.socialclose background:url(http://i1067.photobucket.com/colums/u440/eric/close-dark_zpsc44ffa70.png);height:31px;width:31px;position:absolute;top:-14px;right:-14px;cursor:pointer;.show display:inline;.fixed position position:fixed;

这个CSS应该可以添加到任何地方。现在,我们只缺少一些jquery来让这个坏孩子工作!

jquery让事情变得很酷

首先要做的是,您需要确保已将jquery库添加到您的网站中。你的主题可能有一个包含它的选项,但如果不是,下面是ChrisCoyier(想想CSS技巧)的一个很棒的片段,它将把jQuery添加到您的网站上。此代码段需要添加到WordPress网站的functions.php文件中。亚博yabo88app 下载

如果(!)is_admin())add_action(“wp_enqueue_scripts”,“我的查询队列”,11);函数my_jquery_enqueue()wp_unregister_script('jquery');wp_register_script('jquery',“http”。($\u server['server\u port']==443?“S”:“”。“://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”,错误的,零);wp_排队_脚本(“jquery”);

添加jquery之后,现在您需要在主题目录中创建一个custom.js文件,以便添加一些其他的javascript。在那个文件里,您需要添加以下代码:

/***作者Remy Sharp*url http://remy sharp.com/2009/01/26/element-in-view-event-plugin/*/(function($)function getviewportheight()var height=window.innerheight;//狩猎,opera var模式=document.compatmode;如果((或)模式!$.support.boxModel))//ie,gecko height=(mode='css1compat')?document.documentelement.clientheight://standards document.body.clientheight;//怪癖回程高度;}$(window).scroll(函数()var vph=getviewportheight(),Scrolltop=(document.documentElement.Scrolltop?document.documentElement.scrollTop:文档.body.scrollTop),ELEMS=[];/调皮,但这就是它如何知道要检查每个$.函数()if(this.events&&this.events.inview)elems.push(this.handle.elem);});if(elems.length)$(elems).each(函数()var$el=$(this),top=$el.offset().top,height=$el.height(),inview=$el.data('inview')false;if(scrolltop>(top+height)scrolltop+vph<top)if(inview)$el.data('inview',假);$el.trigger('inview',[假];}}else if(scrolltop<(top+height))if(!inview)$el.data('inview',真的);$el.trigger('inview',[真]);}}})(二)});//启动事件以获取视图中已存在的任何元素。//但是请注意,只有当插件包含在元素绑定到“inview”之后,此操作才有效。(函数()$(window).scroll();});)(jquery);/*!*jquery cookie插件*https://github.com/carhartl/jquery-cookie**版权所有2011,Klaus Hartl*根据MIT或GPL第2版许可证获得双重许可。*http://www.opensource.org/licenses/mit-license.php*http://www.opensource.org/licenses/gpl-2.0*/(函数($)$.cookie=function(键,价值,选项)//键和至少给定的值,设置曲奇…如果(arguments.length>1&&(!/object/.test(object.prototype.toString.call(value))value==null value==undefined))options=$.extend(,选项;if(value==null value==undefined)options.expires=-1;}如果(typeof options.expires=='数字')var days=options.expires,t=options.expires=new date();t.setDate(t.getDate()+天);}值=字符串(值);返回(document.cookie=[编码成分(键),“=”原始的?值:编码成分(值)选项。过期?;expires='+options.expires.toutcstring():'',//使用Expires属性,ie options.path不支持max age?;path='+options.path:“”,选项?域名?亚博体育;亚博体育域='+options.domain:“”,安全?;安全“:”.join(“”);}//键和可能的选项,得到饼干…选项=值var decode=options.raw?函数返回s;}:解码组件;var pairs=document.cookie.split(';“”;对于(var i=0,一对;pair=pairs[i]&&pairs[i].split('=');i++)if(decode(pair[0])==key)返回decode(pair[1]“');//ie将空字符串的cookie保存为“c;“例如与eomb相反,没有“=”,因此,对[1]可能是未定义的返回空值;};)(jquery);(函数($)var settings=速度:350//动画持续时间,easing:“linear”//更多选项使用easing插件,填料:10,约束:假,$window=$窗口,粘滞框=[],方法=init:函数(opts)设置=$扩展(settings,opts);返回这个.each(函数()var$this=$(this);设定位置($this);stickybox[stickybox.length]=$this;MOVEIOTVIEW();(});}移除:function()返回这个。每个(function()var sticky=this;每个(粘性箱,函数(i)$sb)如果($sb.get(0)==粘性)重置(空,$$);粘合盒。拼接(i,1);返回错误;}})(二)(});}销毁:函数()$。每个(stickybox,函数(i)$sb)重置(空,$$);(});粘贴盒=[];$window.unbind(“滚动”,活动视图;$window.unbind(“调整大小”,重置);归还这个;};var moveIntoView=函数()$。每个(stickybox,函数(i)$sb)var$this=$sb,data=$this.data(“stickysb”);如果(data)var stop=$window.scrolltop()-data.off.top,curroffs=$this.offset(),orig top=data.orig.offset.top-data.offs.top,animto=origtop;//if(origtop<stop)//确保在父级if((stop+settings.padding)>data.offs.bottom)animto=data.offs.bottom中停止;否则animto=stop+settings.padding;}$this.stop().animate(top:animto,建立速度设置.放松);});}var setposition=函数($sb)如果($sb)var$this=$sb,$parent=$this.parent(),parentOffs=$parent.offset(),curroff=$this.offset(),data=$this.data(“stickysb”);如果(!)data)data=off://我们的父母抵消,orig://原始css top的缓存:$this.css(“top”),左:$this.css(“左”),职位:$this.css(“职位”),边缘顶部:$this.css(“边缘顶部”),保证金左边:$this.css(“保证金左边”),offset:$this.offset()//在树上找到要定位的元素while(parentoffs&&$parent.css(“position”)==“static”)$parent=$parent.parent();parentOffs=$parent.offset();}if(parentoffs)//找到已过账的祖先var padbtm=parseint($parent.css(“paddingbottom”));padbtm=isnan(padbtm)?0、PADBTM;data.offs=父项;data.off.bottom=settings.constraint?math.abs(($parent.innerheight()-padbtm)-$this.outerheight()):$(document.height();}else data.offs=//转到far set to doc top:0,左:0,底部:$(document).height()$this.css(position:“绝对”,顶部:math.floor(curroff.top-data.off.top)+“px”,左:math.floor(curroff.left-data.off.left)+“px”,保证金:0,width:$this.width()).data(“stickysb”,数据);}}var reset=功能(ev,$toreset)var stickies=stickybox;if($toreset)//仅重置所选项目stickies=[$toreset];}$每个(粘性,函数(i)$sb)var data=$sb.data(“stickysb”);如果(数据)$sb.css(位置:data.orig.position,边缘顶部:data.orig.边缘顶部,边缘左:data.orig.边缘左,左:data.orig.left,顶部:data.orig.top);如果(!)$toreset)//仅重置设置位置($sb);MOVEIOTVIEW();}};}$window.bind(“滚动”,活动视图;$window.bind(“调整大小”,重置);$.fn.stickysidebar=函数(方法)if(方法[方法])返回方法[方法]。应用(this,array.prototype.slice.call(参数,1);否则,(如果)!method typeof method==“object”)返回methods.init.apply(this,争论);}}})(jquery);jquery(document).ready(function($)if($.cookie('first')==null)$(“.socialFooterWrap”).addClass(“show”);$(“.socialFooterWrap”).addClass(“固定位置”);}$('.socialClose')。单击(function()$.cookie('first',“1”,{期满:28,路径:'/');$(“.socialFooterWrap”).removeClass(“show”););$('footer').bind('inview',功能(事件,visible)if(visible==true)//元素现在在viewport$中可见(“.socialFooterWrap”).removeClass(“fixedPosition”);}else//元素已超出viewport$(“.socialFooterWrap”).addClass(“fixedPosition”);});

这里有很多代码,但让我解释一下。第一,我们有两个插件——一个jquery cookie插件,可以很容易地使用cookie,另一个插件检查元素是否在视区中。

然后,在文档就绪功能中,我们做了几件事。

  1. 检查是否有cookie名称socialfooter。如果存在此cookie,这意味着访问者在过去点击了隐藏按钮。因此,我们不想显示社交分享页脚。
  2. 第二,我们有一段代码,如果单击关闭按钮,将删除socialfooter cookie。
  3. 最后,当页脚在视图中时,我们在位置固定和位置相对/站之间切换。这就是当页脚在视图中时如何创建共享栏“停靠”底部的效果。

结论

如果您从未使用过jquery,那么这段代码就不是很简单了。但是,不要害怕,因为大部分都是复制粘贴的。我搜索了你:)

在这个例子中,我留下了大约1亚博体育下载40像素,你的标志将被包括在社会共享页脚。当你在你的网站上包含这个图片时,一定要包含一个图片并更新CSS。

您是否有问题或希望建议任何功能?在下面留下评论,让我知道你在想什么。

埃里克·宾尼翁是中西部州立大学计算机科学专业的学生。当Eric不在线时,他通常在自己的社区里做志愿者,或者和家人一起享受时光。你可以在上面找到埃里克推特.