在側(cè)邊欄設(shè)置滾動(dòng)式的布局方式已經(jīng)是非常普遍的事情了，我們經(jīng)?？梢栽诰W(wǎng)上的各大論壇和門(mén)戶網(wǎng)站中都可以看到這個(gè)布局方式。滾動(dòng)式的側(cè)邊欄不僅可以讓我們的網(wǎng)站頁(yè)面顯的更加美觀，而且可以有效利用側(cè)邊欄的位置，讓一些頁(yè)面信息可以長(zhǎng)時(shí)間讓用戶看到，對(duì)于一些小廣告來(lái)說(shuō)采取這種滾動(dòng)式布局更是具有商業(yè)價(jià)值。那么下面無(wú)憂主機(jī)小編就來(lái)詳細(xì)的介紹一下，如何在php虛擬主機(jī)環(huán)境下，設(shè)置emlog博客程序的固定滾動(dòng)側(cè)邊欄的效果。 在實(shí)現(xiàn)固定滾動(dòng)側(cè)邊欄的效果之前，我們需要在自己網(wǎng)站程序里加載jquery，但是emlog博客程序里自帶這個(gè)js代碼庫(kù)，可以直接調(diào)用/include/lib/js/jquery/目錄下的jquery-1.7.1.js文件，其代碼如下：

<script>
$(function () {
if ($(".fixed_side").length > 0) {
var offset = $(".fixed_side").offset();
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
if (offset.top < scrollTop) $(".fixed_side").addClass("fixed");
else $(".fixed_side").removeClass("fixed");
});}});
</script>

這一段js代碼是用來(lái)實(shí)現(xiàn)固定滾動(dòng)的效果的，設(shè)置好之后是編寫(xiě)html源碼：

<div class="fixed_side"><img src="鏈接圖片地址"></div>

最后用css樣式進(jìn)行外觀的設(shè)定：

.fixed_side{clear:both;overflow:hidden;text-align:center;margin:5px}
.fixed_side img{max-width:100%;}
.fixed{position:fixed;top:0px;width:237px;margin:5px}

所有文件和代碼編輯好了后保存好文件，登入網(wǎng)站的后臺(tái)刷新一下數(shù)據(jù)緩存就可以了。 無(wú)憂主機(jī)相關(guān)文章推薦閱讀： EMLOG如何設(shè)置二級(jí)域名綁定子目錄的偽靜態(tài)規(guī)則 EMLOG調(diào)用分類文章圖文顯示 EMLOG手機(jī)模板部分調(diào)用方法

本文地址：http://www.gle-technology.com/others/21844.html

上一篇: dedecms如何設(shè)置可以只讓管理員查看留言本內(nèi)容呢
下一篇: dedecms程序如何把軟件星星等級(jí)替換成圖片的形式呢