您的位置:首页 > 博客技巧 > 卢松松博客右边侧栏跟随滚动设置方法
咨询QQ:351190365

卢松松博客右边侧栏跟随滚动设置方法

2614人参与 |分类: 博客技巧|时间:2015年07月23日 12:12:29

本博客是采用卢松松博客自适应主题。卢松松主题下载及详细介绍:卢松松自适应博客主题模板介绍提供免费下载。使用此主题时博主刚才开始使用时,也遇到过侧边栏跟随重叠等问题,博主也经过多次调试才实现在的。下面就把自己的操作方式介绍给大家。

具体效果可以查看本博客实现跟随侧栏的效果。


侧栏跟随CSS代码:

CSS代码在:http://luopaichao.com/zb_users/theme/LuSongSong/style/LuSongSong-Index.css

/*侧栏跟随*/

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


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";}

};

}


})();

//rss+weibo

document.getElementById("wenzhang").innerHTML = "<dl class='widget popular-posts'><dd><h3>投稿本站</h3></dd><dt><ul id='ulCatalog'><a href='http://luopaichao.com/tougao.html' target='_blank'>罗排超IDC博客诚招投稿文章,一经采用将获得大量曝光机会,点此了解。   联系QQ:351190365 </a><p></p></ul></dt></dl>";

document.getElementById("dingyue").innerHTML = "";


注:这段代码可放入任意JS文件中,比如我放在了util.js 文件里,。 zblog《低调与华丽》模板的用户可直接下载该JS文件替换。

JS代码地址:http://luopaichao.com/zb_users/theme/LuSongSong/script/util.js

网页代码部分:

<div id="box">

<div id="float" class="div1"> 

                                        <div id="wenzhang"></div>

<div id="dingyue"></div>

您在跟随侧栏目上需要显示的代码</script>

</div>

注:这里可以放文章列表、联盟广告,总之是个提高点击率的好方法。Z-blog用户把此段代码添加到single.html的侧栏位置即可。

提醒:在使用侧边栏时注意一定要是HTML加载方式。或则会出现重叠。

以上就是我做跟随侧栏目的思路,以上代码可以直接替换到您的博客中(注意备份以免出错)。如果有不明白的可以随时咨询我。或则看一下我博客的实际效果

来源:,欢迎分享本文,转载请保留出处!

咨询QQ:351190365

  • 评论:(0)
  • 赞助本站

咨询QQ:351190365

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

咨询QQ:351190365
罗排超博客赞助