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