體驗效果：http://hovertree.com/texiao/jquery/12.htm
完整HTML文件源代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>滾動頁面時div到達頂部固定- 何問起</title>
<meta charset="utf-8" />
<style type="text/css">
* {
padding: 0px;
margin: 0px;color:white
}
a{color:white}
.box {
width: 1000px;
background: #ccc;
margin: 0 auto;
overflow: hidden;
}
.mainhovertree {
width: 770px;
height: 3000px;
background: #000;
float: left;
}
.sub {
width: 220px;
background: #FC6;
float: right;
}
.sub01 {
width: 220px;
height: 100px;
background: #0CC;
margin-bottom: 10px;
}
.hvtfixed {
width: 220px;
height: 300px;
background: #F66;
font: normal 13px/30px \5FAE\8F6F\96C5\9ED1;
text-align: center;
top: 10px;
}
</style>
<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
t = $('.hvtfixed').offset().top;
mh = $('.mainhovertree').height();
fh = $('.hvtfixed').height();
$(window).scroll(function(e){
s = $(document).scrollTop();
if(s > t - 10){
$('.hvtfixed').css('position','fixed');
if(s + fh > mh){
$('.hvtfixed').css('top',mh-s-fh+'px');
}
}else{
$('.hvtfixed').css('position','');
}
})
});
</script>
</head>
<body>
<div class="box">
<!--代碼開始-->
<div class="mainhovertree">
<div style="background-color:#959822; width:100%;height:150px;">
請滾動頁面體驗效果
</div>
<div style="width:768px;margin:50px auto;">
滾動頁面時div到達頂部固定
<a href="http://hovertree.com/hvtart/bjae/s2851k6t.htm">原文</a>
<a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/menu/jquery/">jQuery</a>
<br />
</div>
<div style="width:738px;height:186px;margin:10px auto;">
</div>
<div style="background-color:Green; width:100%;height:150px;">
<h3>滾動頁面時div到達頂部固定</h3>
hovertree.com
</div>
<div style="background-color:Red; width:100%;height:150px;">歡迎</div>
<div style="background-color:Yellow; width:100%;height:150px;"><a href="http://hovertree.com/">首頁</a></div>
<div style="background-color:Silver; width:100%;height:150px;">何問起</div>
<div style="background-color:Aqua; width:100%;height:150px;">hovertree.com</div>
<div style="background-color:Fuchsia; width:100%;height:150px;"><a href="http://hovertree.com/texiao/">更多特效</a></div>
<div style="background-color:Green; width:100%;height:150px;">hovertreetofoot</div>
<div style="background-color:Blue; width:100%;height:150px;"></div>
<div style="background-color:Olive; width:100%;height:350px;">何問起 滾動頁面</div>
<div style="background-color:Green; width:100%;height:150px;">HoverTree</div>
<div style="background-color:Purple; width:100%;height:150px;">jquery</div>
<div style="background-color:Green; width:100%;height:150px;"><a href="http://hovertree.com/hvtart/bjae/65358656.htm" target="_blank">原文</a></div>
<div style="background-color:Lime; width:100%;height:150px;">hovertree.com</div>
<div style="background-color:Orange; width:100%;height:150px;">完整代碼</div>
<div style="height:130px;"></div>
</div>
<div class="sub">
<div class="sub01"></div>
<div class="sub01"></div>
<div class="hvtfixed">我是固定的喲</div>
</div>
<!--代碼結束-->
</div>
</body>
</html>