網(wǎng)頁(yè)側(cè)欄固定的用途非常廣泛，可以是固定導(dǎo)航，可以是固定部分文章，可以是固定對(duì)話窗口，更為常見(jiàn)的是固定廣告層?，F(xiàn)在很多站長(zhǎng)都把側(cè)欄部分內(nèi)容給固定了，然而當(dāng)被固定內(nèi)容層太高時(shí)，網(wǎng)頁(yè)滾到后面時(shí)可能會(huì)把底部的內(nèi)容遮住了，這十分影響用戶體驗(yàn)的。如下圖所示：
側(cè)欄把底部遮住了
為了獲得更好的用戶體驗(yàn)，需要解決這個(gè)問(wèn)題，使側(cè)欄始終位于底部之上，但又始終浮動(dòng)可見(jiàn)。效果圖如下：
側(cè)欄位于底部之上
側(cè)欄始終浮動(dòng)可見(jiàn)
使用JS的實(shí)現(xiàn)方法
1、在<head></head>里添加如下代碼
<!-- float div start-->
<script type="text/javascript" src="/script/jquery-1.4.2.min.js"></script>
<style type ="text/css" >
.fixed {
position:fixed;
top:0px;
width:300px;
}
.fixed2 {
position:fixed;
top:-40px;
width:300px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
var a = $("#floatbox").offset();
$(window).scroll(function() {
var b = $(window).scrollTop();
if (b > a.top) {
if((b + 600 + 200) < document.body.parentNode.scrollHeight)
$("#floatdiv").addClass("fixed");
else
$("#floatdiv").addClass("fixed2");
} else {
$("#floatdiv").removeClass("fixed");
$("#floatdiv").removeClass("fixed2");
}
});
});
</script>
<!-- float div end-->
上述代碼里的數(shù)字需要根據(jù)自己的網(wǎng)頁(yè)進(jìn)行調(diào)整，解釋如下：
<script type="text/javascript" src="/script/jquery-1.4.2.min.js"></script>
引用jquery.js，注意文件路徑
top:0px; 這個(gè)是漂浮層距離網(wǎng)頁(yè)頂部的位置
width:300px; 這個(gè)是漂浮層的寬度
top:-40px; 這個(gè)是漂浮層距離網(wǎng)頁(yè)頂部的位置
if((b + 600 + 200) < document.body.parentNode.scrollHeight)
600是漂浮層的高度，200是網(wǎng)頁(yè)底部的高度，如下圖所示：
漂浮層和底部高度
2、固定層的代碼如下：
<div id="floatbox" >
<div id="floatdiv">
<ul>
<li><a href="#" target="_blank">這里是需要固定的內(nèi)容</a></li>
<li><a href="#" target="_blank">這里是需要固定的內(nèi)容</a></li>
<li><a href="#" target="_blank">這里是需要固定的內(nèi)容</a></li>
<li><a href="#" target="_blank">這里是需要固定的內(nèi)容</a></li>
</ul>
</div>
</div>
通過(guò)上述方法的設(shè)置，固定側(cè)欄但又不遮住底部的功能就實(shí)現(xiàn)了。
您可能對(duì)如下文章也感興趣
4種方法固定側(cè)欄內(nèi)容和廣告位 提高網(wǎng)站PV和點(diǎn)擊率
