天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制 | RSS订阅 | 网站地图 | 联系我们
天兴工作室自用主题2015版上架销售
当前位置:网站首页 教程 正文

卢松松博客右侧跟随滚动模块代码

天兴工作室 3年前 (2014-04-06) 教程 4270 ℃ 10 评论
内容加载中......

很多朋友在做站的时候都喜欢加入这种右侧跟随滚动模块代码,跟随滚动这一块的内容得到了更多的展示,天兴工作室之前做模板的时候也遇到很多这种,用了各种各样的方法,后来还是觉得卢松松博客的那个跟随滚动的代码比较简单点,今天就吧方法贴出来,希望可以帮助到有需要的朋友。

一共有三个部分的代码,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";}        
        };    
    }    
})();

好了,大功告成,自己再美化调整下,以融入自己的网站里面去就完成了。

我要提问 如果你对于此文还有任何疑问欢迎在文章下面的评论区域留言,如果你的疑问比较多,欢迎在本站的在线提问专业去发布问题,点击右侧的我要提问即可到达。天兴工作室将尽我所能为你解答问题。

本文标签卢松松 跟随滚动 右侧固定

本文地址http://www.txcstx.cn/post/591.html

版权说明:如非注明,本站文章均为 天兴工作室 原创,转载请注明出处和附带本文链接。

我猜你还喜欢这些...

哈哈,本文已有 10 位小伙伴发表了看法:

1#000000 (游客)  评论于 2015-02-21 22:46:32回应ta
你的的那个升级版的主题居然没有加这个代码进去,我说咋不能滑动呢!
1#天兴工作室 (游客)  评论于 2015-02-22 07:37:13回应ta
什么升级版?天兴黄升级版?有这个啊,仔细看主题介绍说明
2#系芯 (游客)  评论于 2015-02-15 16:28:51回应ta
按照方法改了,我的模板没成功
3#大城小我 (游客)  评论于 2014-07-16 09:12:27回应ta
水品有限,没有成功,闷闷
4#访客 (游客)  评论于 2014-04-24 21:02:15回应ta
你好,想请教一下,文章中代码部分框架是如何实现的,谢谢
4#天兴 (游客)  评论于 2014-04-25 08:03:35回应ta
请把问题描述的清楚些,我才好回答额
4#香港新世界机 (游客)  评论于 2014-09-30 15:08:31回应ta
是不是静态的页面才可以,伪静态的不可以是吧
4#天兴工作室 (游客)  评论于 2014-09-30 16:58:01回应ta
跟伪静态什么的没关系的,一样用
4#访客 (游客)  评论于 2014-04-25 23:09:42回应ta
就是文章中代码部分的“1234、一条绿色竖线、代码”这个显示效果是如何实现的,谢谢!
4#天兴工作室 (管理员)  评论于 2014-04-26 10:01:15回应ta
⊙﹏⊙b汗 就是编辑器中选择"代码语言"就行了

欢迎 发表评论

必填

选填

选填

必填

◎欢迎在这里交流反馈,垃圾评论会秒删的额...

联系我们
最新评论
标签云
删除成员积分兑换上网卡XT502zblogasp转换zblogphp免费模板联动类别电信3G3G预付费垃圾流量GPRS优惠叠加送电动车神州行积分zblog回到顶部天翼无绳存话费自用主题短信包傻X校园WLANDiscuz!讨薪天兴通讯老版zba解压小米手机分类过滤卢松松博客模板php自适应后台指定分类模板html代码setupconnection单栏模板zblogasp版ytcmsseo作弊提交工单
热门模板