使用JS的实现方法
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-->
上述代码里的数字需要根据自己的网页进行调整，解释如下：[mw_shl_code=applescript,true]<script type="text/javascript" src="/script/jquery-1.4.2.min.js"></script>[/mw_shl_code]
引用jquery.js，注意文件路径
top:0px; 这个是漂浮层距离网页顶部的位置
width:300px; 这个是漂浮层的宽度
top:-40px; 这个是漂浮层距离网页顶部的位置
if((b + 600 + 200) < document.body.parentNode.scrollHeight)
600是漂浮层的高度，200是网页底部的高度，如下图所示：
漂浮层和底部高度
漂浮层和底部高度
2、固定层的代码如下：
<!-- 固定-->
<div id="floatbox" >
<div id="floatdiv">
<ul>
<li><a href="#" target="_blank">这里是需要固定的内容</a></li>
</ul>
</div>
</div>
<!-- 固定-->
|
