新聞中心
zblog右側(cè)跟隨滾動(dòng)模塊設(shè)置方法
作者 / 無(wú)憂主機(jī) 時(shí)間 2015-12-30 17:39:49
在網(wǎng)站中設(shè)置右側(cè)跟隨滾動(dòng)模塊是當(dāng)今網(wǎng)站非常流行的設(shè)置，設(shè)置這種跟隨滾動(dòng)式的模塊有一個(gè)非常好的作用，顧名思義隨滾動(dòng)式的模塊會(huì)隨著訪問者的頁(yè)面瀏覽跟著一起移動(dòng)，這樣一來(lái)就可以讓添加在這個(gè)模塊里的內(nèi)容一直可以顯示在訪問者的面前，起到很好的突出展示的效果。下面無(wú)憂主機(jī)小編就來(lái)詳細(xì)介紹一下zblog程序添加右側(cè)跟隨滾動(dòng)模塊的方法。 我們一共需要設(shè)置三個(gè)部分，html源代碼、css樣式表以及js代碼。首先我們需要在網(wǎng)站的源代碼中想要添加右側(cè)跟隨滾動(dòng)模塊的地方添加如下一段網(wǎng)站源碼：
<div id="box"> <div id="float" class="div1"> 這里面改成你自己網(wǎng)站的代碼與標(biāo)簽 </div> </div>網(wǎng)站原代碼添加后基本的模塊然就出來(lái)了，接下來(lái)我們需要再新建一個(gè)css樣式表用來(lái)定義右側(cè)跟隨滾動(dòng)模塊的顯示樣式，代碼如下：
#box{float:left; position:relative;width:250px;}
.div1{width:250px;}
.div2{position:fixed;_position:absolute;top:0;z-index:250;}
如果感覺這上面的樣式不適合的話也可以根據(jù)自己的需求進(jìn)行設(shè)置和定義哦。
最后我們需要添加一段js的代碼用來(lái)實(shí)現(xiàn)跟隨滾到的特殊效果了，代碼如下：
(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代碼需要放在網(wǎng)站所調(diào)用的js代碼里面。以上這三個(gè)部分全部設(shè)置好了之后保存一下文件，然后在網(wǎng)站的后臺(tái)重建一下文件，之后在網(wǎng)站的前端就可以看到右側(cè)跟隨滾動(dòng)模塊已經(jīng)出現(xiàn)了。
無(wú)憂主機(jī)相關(guān)文章推薦閱讀：
ZBLOG主題修改方法
ZBLOG必備插件YTCMS插件介紹
ZBLOG首頁(yè)的分頁(yè)條實(shí)現(xiàn)調(diào)用不同模板的方法
本文地址：http://www.gle-technology.com/zblog/21257.html
