提高浏览量的特效:侧栏跟随滚动条
2012-04-05 00:29
651 查看
现在许多web2.0风格的网站都喜欢用“侧栏跟随”的效果,就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多、内容较长的网站。
这种特效对提高网站浏览量、文章点击率、广告点击量都有一定效果。
![](http://images.lusongsong.com/upload/453.gif)
具体实例,请参见网络文摘栏目随机文章,未来主博客不一定会用。
/*侧栏跟随*/
#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.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文件中,比如我放在了util.js 文件里,。 zblog《低调与华丽》模板的用户可直接下载该JS文件替换。
下载地址:http://lusongsong.com/theme/LuSongSong/script/util.js
网页代码部分:
<div id="box">
<div id="float" class="div1">
这里写你网站的代码与标签。
</div>
</div>
注:这里可以放文章列表、联盟广告,总之是个提高点击率的好方法。Z-blog用户把此段代码添加到single.html的侧栏位置即可。
特别提示:此代码试用与任何CMS系统,但该特效在IE6下无法实现,其余浏览器均没问题,同时侧栏其余部分应使用静态文件调用,使用JS调用栏目会出现代码重叠现象,调用联盟广告没问题。
相关阅读:
【推荐】Z-Blog优化小技巧
巴士文章列表插件会拖慢Z-blog速度
Z-Blog负载均衡的方法(图片篇)
精简ZBlog模版代码,提高页面打开速度
流量统计是否影响网站速度
启用lazyload插件,减少图片加载
Zblog文章页调用静态文件的方法
顶: 6踩: 2 来源:卢松松博客,欢迎分享,(QQ/微信:13340454)
');
(window.slotbydup=window.slotbydup || []).push({
id: '2398783',
container: s,
size: '336,280',
display: 'inlay-fix'
});
})();
这种特效对提高网站浏览量、文章点击率、广告点击量都有一定效果。
效果演示:
![](http://images.lusongsong.com/upload/453.gif)
具体实例,请参见网络文摘栏目随机文章,未来主博客不一定会用。
代码如下:
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.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文件中,比如我放在了util.js 文件里,。 zblog《低调与华丽》模板的用户可直接下载该JS文件替换。
下载地址:http://lusongsong.com/theme/LuSongSong/script/util.js
网页代码部分:
<div id="box">
<div id="float" class="div1">
这里写你网站的代码与标签。
</div>
</div>
注:这里可以放文章列表、联盟广告,总之是个提高点击率的好方法。Z-blog用户把此段代码添加到single.html的侧栏位置即可。
特别提示:此代码试用与任何CMS系统,但该特效在IE6下无法实现,其余浏览器均没问题,同时侧栏其余部分应使用静态文件调用,使用JS调用栏目会出现代码重叠现象,调用联盟广告没问题。
相关阅读:
【推荐】Z-Blog优化小技巧
巴士文章列表插件会拖慢Z-blog速度
Z-Blog负载均衡的方法(图片篇)
精简ZBlog模版代码,提高页面打开速度
流量统计是否影响网站速度
启用lazyload插件,减少图片加载
Zblog文章页调用静态文件的方法
顶: 6踩: 2 来源:卢松松博客,欢迎分享,(QQ/微信:13340454)
');
(window.slotbydup=window.slotbydup || []).push({
id: '2398783',
container: s,
size: '336,280',
display: 'inlay-fix'
});
})();
相关文章推荐
- CSS实现浮动层跟随滚动条特效(兼容IE6)
- HTML 特效 跟随 滚动条 的 提示
- 跟随滚动条漂浮的JS特效
- xScrollStick 跟随滚动条漂浮的JS特效
- 给超链接添加特效-鼠标移动到上展示提示信息-提示信息跟随鼠标移动
- js雪花特效_跟随页面滚动的下雪特效
- 如何做网站推广?如何提高网站浏览量?
- 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
- div 跟随页面上下滚动条移动
- 二维码图片固定在右下角某处并跟随滚动条滚动
- Html5添加实用的仿Instagram头部固定跟随滚动特效插件教程
- Jquery 操作页面中iframe自动跟随窗口大小变化,而不出现滚动条,只在iframe内部出滚动条
- JavaScript:一个鼠标动态跟随文字特效的示例
- 固定在网页顶部跟随滚动条滑动而滑动的DIV层
- js跟随滚动条滚动浮动代码
- 在JFrame中设置滚动条跟随内容滚动
- JavaScript实现文字跟随鼠标特效
- JS实现可爱的鼠标跟随特效
- 跟随滚动条漂浮的返回顶部按钮效果