现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果
当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会。很多新闻资讯类网站如新浪、网易、CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站。
现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果。就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多、内容较长的网站。
做one笔记就运用了以下方法:
提高浏览量的特效:侧栏跟随滚动条
来源:卢松松博客
http://lusongsong.com/reed/453.html
CSS部分:
/*侧栏跟随*/ #box{float:left; position:relative;width:293px;} .div1{width:293px;} .div2{position:fixed;_position:absolute;top:0;z-index:293;}
注:每个网站的侧栏宽度不同,可根据你网页的宽度调整div1的宽度,我的是width:293px;,把这段代码添加到你的CSS文件中即可。
JS部分:
JavaScript代码
//侧栏跟随 (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";} }; } })();
注:这段代码可放入任意JS文件中,比如我放在了global.min.js文件里。
网页代码部分:
代码如下:
<div id="box"> <div id="float" class="div1"> 这里写你网站的代码与标签 </div> </div>
注:这里可以放文章列表、联盟广告,总之是个提高点击率的好方法。Z-blogPHP用户把此段代码添加到side.phpl的侧栏位置即可。
特别提示:此代码试用与任何CMS系统,但该特效在IE6下无法实现,其余浏览器均没问题,同时侧栏其余部分应使用静态文件调用,使用JS调用栏目会出现代码重叠现象,调用联盟广告没问题。
效果可以看本站:
当滚动到窗口顶部时候,就会固定跟随下滑...
发布于 2016-04-2312:48:03 回复
发布于 2015-11-1622:13:46 回复
发布于 2014-07-1401:34:26 回复