在側(cè)邊欄設(shè)置滾動式的布局方式已經(jīng)是非常普遍的事情了，我們經(jīng)?？梢栽诰W(wǎng)上的各大論壇和門戶網(wǎng)站中都可以看到這個布局方式。滾動式的側(cè)邊欄不僅可以讓我們的網(wǎng)站頁面顯的更加美觀，而且可以有效利用側(cè)邊欄的位置，讓一些頁面信息可以長時間讓用戶看到，對于一些小廣告來說采取這種滾動式布局更是具有商業(yè)價值。那么下面無憂主機(jī)小編就來詳細(xì)的介紹一下，如何在php虛擬主機(jī)環(huán)境下，設(shè)置emlog博客程序的固定滾動側(cè)邊欄的效果。 在實現(xiàn)固定滾動側(cè)邊欄的效果之前，我們需要在自己網(wǎng)站程序里加載jquery，但是emlog博客程序里自帶這個js代碼庫，可以直接調(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代碼是用來實現(xiàn)固定滾動的效果的，設(shè)置好之后是編寫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)站的后臺刷新一下數(shù)據(jù)緩存就可以了。 無憂主機(jī)相關(guān)文章推薦閱讀： EMLOG如何設(shè)置二級域名綁定子目錄的偽靜態(tài)規(guī)則 EMLOG調(diào)用分類文章圖文顯示 EMLOG手機(jī)模板部分調(diào)用方法

本文地址：http://m.love62.cn/others/21844.html

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