新聞中心
emlog設(shè)置固定滾動側(cè)邊欄的方法
作者 / 無憂主機 時間 2016-03-13 06:57:03
在側(cè)邊欄設(shè)置滾動式的布局方式已經(jīng)是非常普遍的事情了,我們經(jīng)常可以在網(wǎng)上的各大論壇和門戶網(wǎng)站中都可以看到這個布局方式。滾動式的側(cè)邊欄不僅可以讓我們的網(wǎng)站頁面顯的更加美觀,而且可以有效利用側(cè)邊欄的位置,讓一些頁面信息可以長時間讓用戶看到,對于一些小廣告來說采取這種滾動式布局更是具有商業(yè)價值。那么下面無憂主機小編就來詳細的介紹一下,如何在php虛擬主機環(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樣式進行外觀的設(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ù)緩存就可以了。 無憂主機相關(guān)文章推薦閱讀: EMLOG如何設(shè)置二級域名綁定子目錄的偽靜態(tài)規(guī)則 EMLOG調(diào)用分類文章圖文顯示 EMLOG手機模板部分調(diào)用方法
本文地址:http://www.gle-technology.com/others/21844.html