分享一些有关于zblog的教程,这里有zblog初级教程、zblog中级教程和zblog进阶版教程,如果对你有所帮助,深感荣幸
很多朋友在做站的时候都喜欢加入这种右侧跟随滚动模块代码,跟随滚动这一块的内容得到了更多的展示,天兴工作室之前做模板的时候也遇到很多这种,用了各种各样的方法,后来还是觉得卢松松博客的那个跟随滚动的代码比较简单点,今天就吧方法贴出来,希望可以帮助到有需要的朋友。
一共有三个部分的代码,css、js和html
在html需要加入跟随滚动的地方加入以下代码:
<div id="box"> <div id="float" class="div1"> 这里写你网站的代码与标签 </div> </div>
css部分代码,加入到你网站的css里面:
/*侧栏跟随*/ #box{float:left; position:relative;width:250px;} .div1{width:250px;} .div2{position:fixed;_position:absolute;top:0;z-index:250;}
宽度自己随意调整,其他东西不要动,
js部分,把以下js代码加入你网站所调用的js里面也行,直接写入到html里面也可以:
//侧栏跟随 (function(){ var oDiv=document.getElementById("float"); var H=0,iE6; var Y=oDiv; while(Y){H+=Y.offsetTop;Y=Y.offsetParent}; iE6=window.ActiveXObject&&!window.XMLHttpRequest; if(!iE6){ window.onscroll=function() { var s=document.body.scrollTop||document.documentElement.scrollTop; if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}} else{oDiv.className="div1";} }; } })();
好了,大功告成,自己再美化调整下,以融入自己的网站里面去就完成了。
售价:免费 82162 ℃ 4 评论
售价:免费 82162 ℃ 4 评论
售价:免费 82162 ℃ 4 评论
已有 12 位小伙伴发表了看法
回应ta joykin (游客)
评论于 2018-03-05 12:43:41
回应ta 乌鲁木齐保健按摩网 (游客)
评论于 2017-12-01 13:19:50
回应ta 000000 (游客)
评论于 2015-02-21 22:46:32
回应ta 天兴工作室 (游客)
评论于 2015-02-22 07:37:13
回应ta 系芯 (游客)
评论于 2015-02-15 16:28:51
回应ta 大城小我 (游客)
评论于 2014-07-16 09:12:27
回应ta 访客 (游客)
评论于 2014-04-24 21:02:15
回应ta 天兴 (游客)
评论于 2014-04-25 08:03:35
回应ta 香港新世界机 (游客)
评论于 2014-09-30 15:08:31
回应ta 天兴工作室 (游客)
评论于 2014-09-30 16:58:01
回应ta 访客 (游客)
评论于 2014-04-25 23:09:42
回应ta 天兴工作室 (管理员)
评论于 2014-04-26 10:01:15
欢迎 你 发表评论