新闻中心
zblog右侧跟随滚动模块设置方法
作者 / 无忧主机 时间 2015-12-30 17:39:49
在网站中设置右侧跟随滚动模块是当今网站非常流行的设置，设置这种跟随滚动式的模块有一个非常好的作用，顾名思义随滚动式的模块会随着访问者的页面浏览跟着一起移动，这样一来就可以让添加在这个模块里的内容一直可以显示在访问者的面前，起到很好的突出展示的效果。下面无忧主机小编就来详细介绍一下zblog程序添加右侧跟随滚动模块的方法。 我们一共需要设置三个部分，html源代码、css样式表以及js代码。首先我们需要在网站的源代码中想要添加右侧跟随滚动模块的地方添加如下一段网站源码：
<div id="box"> <div id="float" class="div1"> 这里面改成你自己网站的代码与标签 </div> </div>网站原代码添加后基本的模块然就出来了，接下来我们需要再新建一个css样式表用来定义右侧跟随滚动模块的显示样式，代码如下：
#box{float:left; position:relative;width:250px;}
.div1{width:250px;}
.div2{position:fixed;_position:absolute;top:0;z-index:250;}
如果感觉这上面的样式不适合的话也可以根据自己的需求进行设置和定义哦。
最后我们需要添加一段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代码需要放在网站所调用的js代码里面。以上这三个部分全部设置好了之后保存一下文件，然后在网站的后台重建一下文件，之后在网站的前端就可以看到右侧跟随滚动模块已经出现了。
无忧主机相关文章推荐阅读：
ZBLOG主题修改方法
ZBLOG必备插件YTCMS插件介绍
ZBLOG首页的分页条实现调用不同模板的方法
本文地址：https://www.51php.com/zblog/21257.html
