css 侧栏跟随_如何实现博客的侧栏跟随(滚动条)效果

  • Post author:
  • Post category:其他


现在许多web2.0风格的网站都喜欢用“侧栏跟随”的效果,就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多、内容较长的网站。

这种特效对提高网站浏览量、文章点击率、广告点击量都有一定效果。

效果演示

具体实例,请参见网络文摘栏目随机文章,未来主博客不一定会用。

代码如下:

CSS部分:/*侧栏跟随*/

#box{float:left; position:relative;width:250px;}.div1{width:250px;}.div2{position:fixed;_position:absolute;top:0;z-index:250;}

注:每个网站的侧栏宽度不同,可根据你网页的宽度调整div1的宽度,我的是width:250px;,把这段代码添加到你的CSS文件中即可。

JS部分://侧栏跟随

(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.οnscrοll=function()

{

var s=docum



版权声明:本文为weixin_33249310原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。