如下圖：
剛開始主頁是這樣顯示的：
當(dāng)向上滑到一定距離時(shí)，逐漸變成頭部固定在頂部，如下圖：
當(dāng)又向下滑時(shí)回到第一張圖，自己試了下監(jiān)聽滾動(dòng)條做效果但是達(dá)不到想要的效果，求大神告知，謝謝
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>我的主頁</title>
<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
<style>
#main {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
overflow-y: auto;
}
#wrap {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
flex-flow: column;
}
/*主頁頭部*/
header{position: relative; padding: 0 14px; height: 168px;}
.bg-index{position: absolute; top: 0; left: 0; width: 100%; height: 100%;
filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
-webkit-filter: blur(3px); /* Chrome, Opera */
-moz-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3, MakeShadow=false); /* IE6~IE9 */}
.top{position: relative; height: 44px; line-height: 44px; z-index: 2;}
.top em{width: 40px; height: 44px; background: url(../../image/back1.png) no-repeat left 12px; background-size: 10px 17px;
float: left;}
.top span{width: 40px; height: 44px; background: url(../../image/more2.png) no-repeat right 12px; background-size: 4px 17px;
float: right;}
.top i{width: 18px; height: 44px; background: url(../../image/msg3.png) no-repeat 0 12px; background-size: 18px;
float: right;}
.bg-color{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.6);
opacity: 0.6}
.i-info{margin-top: 20px; margin-bottom: 36px; z-index: 2px; color: #fff;}
.i-pic{border: 2px solid #fefefe; width: 63px; height: 63px; border-radius: 50%; overflow: hidden; z-index: 2;}
.i-pic img{width: 100%; height: 100%;}
.i-menu{z-index: 2; margin-left: 10px;}
.i-name{font-size: 18px; line-height: 20px; padding-bottom: 4px;}
.i-nav{font-size: 14px; line-height: 20px;}
.i-nav span{margin-right: 5px;}
/*Tab選項(xiàng)頭部*/
.Tab-top{position: relative; height: 44px; line-height: 44px; box-shadow: 0px 4px 4px 0px rgba(76, 81, 118, 0.15);
font-size: 18px; background-color: #fefefe; padding:0 14px; color: #232528; width: calc(100% - 28px);}
.Tab-top em{height: 44px; background: url(../../image/back.png) no-repeat left 12px; background-size: 10px 17px;
float: left; padding-left: 30px;}
.Tab-top span{width: 40px; height: 44px; background: url(../../image/more3.png) no-repeat right 12px; background-size: 4px 17px;
float: right;}
.Tab-top i{width: 18px; height: 44px; background: url(../../image/msg2.png) no-repeat right 12px; background-size: 18px;
float: right;}
.navMenu{background-color: #fefefe; border-bottom: 1px solid #eeeff7;}
.navMenu a{flex:1px; -webkit-flex:1; -webkit-flex-box:1; text-align: center;}
.navMenu span{ font-size:16px; color: #999; padding: 12px 0; border-bottom: 2px solid #fefefe;}
.navMenu span.on{border-bottom: 2px solid #ffc708;}
/*動(dòng)態(tài)*/
.cir-container,.Fans-container{margin-top: 10px;}
.cir-container .cir-box{background: #fefefe; margin-bottom: 10px;}
.cir-container .cir-box:last-child{margin-bottom: 0;}
.cir-container .cir-title{padding: 14px 14px 0 14px; display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;
display: flex; -webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;
margin-bottom: 8px;}
.cir-title img{width: 36px; height: 36px; border-radius: 50%;}
.cir-title .cir-info{margin-left: 12px; -webkit-box-flex: 1;-webkit-flex: 1;flex: 1;}
.cir-name{font-size: 15px; line-height: 20px; letter-spacing: 2px;}
.cir-time{font-size: 12px; line-height: 20px; letter-spacing: 1px; color: #ced1d5;}
.cir-rt .down-arrow{display: inline-block; width: 16px; height: 10px; background: url(../../image/down-arrow.png) no-repeat center;
background-size: contain; margin-left: 10px;}
.cir-content{line-height: 25px; font-size: 17px; padding: 0 14px 7px 14px;}
.cir-navmenu{border-top: 1px solid #f2f2f2;height: 35px; text-align: center;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;
display: flex; font-size: 13px; text-align:justify; margin: 0 14px;}
.cir-navmenu span{-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;overflow-y: auto; display: -webkit-box;display: -ms-flexbox;
display: -webkit-flex; display: flex; -webkit-box-align: center ;-ms-flex-align: center; -webkit-align-items: center;
align-items: center; -webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center; }
.cir-navmenu span em{width: 20px; height: 30px; }
.cir-navmenu span i{margin-left: 3px; color: #999;}
.cir-navmenu span:nth-child(3) i{margin-left: 4px;}
.cir-navmenu span:nth-child(1) em{background: url(../../image/love.png) no-repeat center 1px; background-size: auto 20px;}
.cir-navmenu span:nth-child(2) em{background: url(../../image/comment.png) no-repeat center; background-size: auto 20px;}
.cir-navmenu span:nth-child(3) em{background: url(../../image/share.png) no-repeat center; background-size: auto 20px;}
.cir-navmenu span:nth-child(1) em.on{background: url(../../image/love1.png) no-repeat center 1px; background-size: auto 20px;}
/*九宮格*/
.cell {padding:0 14px;max-width: 210px;max-height: 210px;overflow: hidden;padding-bottom: 10px;}
.cell img { width: 100%; height: 100%;}
.cell9 {padding:0 7px;width: calc(100% - 14px);overflow: hidden;}
.cell9 .item { width: calc(33.33% - 14px); float: left; margin: 0 7px 14px 7px; position: relative; }
.cell9.cell4 .item {width: calc(50% - 14px);}
.cell9 .item:before {content: "";display: inline-block;padding-bottom: 100%;width: 0.1px;vertical-align: middle;}
.cell9 .item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
/*視頻*/
.bad-video{margin:0 14px 14px 14px; position: relative; height: 200px;}
.videoPlay{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 58px;}
.video{ width:100%; height:100%;}
.video-num{color: #fff; font-size: 13px; letter-spacing: 2px; position: absolute; right: 10px; bottom: 13px;}
/*活動(dòng)*/
.act-list li{background: #fefefe; padding: 14px; margin-bottom: 10px;}
.act-top{position: relative; }
.act-top .open-icon{position: absolute; top: 0; right: 0;background: url(../../image/down-arrow.png) no-repeat center;
background-size: contain; width: 15px; height: 10px;}
.act-toplf{width: calc(100% - 40px);}
.act-title{font-size: 16px; line-height: 20px;}
.act-title em{width: 15px; height: 15px; background: url() no-repeat center; background-size: contain;
vertical-align: middle; margin-left: 8px;}
.act-title em.one{background: url(../../image/r1.png) no-repeat center; background-size: contain;}
.act-title em.two{background: url(../../image/r2.png) no-repeat center; background-size: contain;}
.act-title em.three{background: url(../../image/r3.png) no-repeat center; background-size: contain;}
.act-time{font-size: 13px; line-height: 20px; color: #ced1d5;}
.act-info{padding: 5px; background-color: #e9eaf1; border-radius: 2px;}
.act-info img{width: 53px; height: 53px; float: left;}
.act-rtinfo{width: calc(100% - 73px); margin: 0 10px; font-size: 15px; color: #666; line-height: 24px;
float: left;}
/*粉絲*/
.fans-list li{background-color: #fefefe; padding: 14px; box-shadow: inset 0px -1px 0px 0px #d2d3d5;}
.fans-pic{width: 45px; height: 45px; border-radius: 50%; overflow: hidden; margin-right: 18px;}
.fans-pic img{width: 100%; min-height: 45px;}
.fans-info{flex: 1; -webkit-flex:1; -webkit-flex-box:1;}
.fans-name{font-size: 16px; line-height: 20px;}
.fans-num{font-size: 13px; color: #999;}
.fans-btn{min-width: 62px; height: 30px; border: solid 1px #ffc708; border-radius: 2px;
font-size: 15px; color: #ffc708;}
.fans-btn.on{color: #ccc; border: solid 1px #ccc;}
</style>
</head>
<body>
<div class="wrap">
<!-- 主頁頭部 -->
<header id="index-top">
<div class="top">
<em></em>
<span></span>
<i></i>
</div>
<div class="i-info flex-align-center">
<div class="i-pic">
<img src="../../image/pic.png" alt="人頭像">
</div>
<div class="i-menu">
<p class="i-name">用戶名</p>
<p class="i-nav">
<span>關(guān)注 4</span>
<span>粉絲 0</span>
</p>
</div>
</div>
<img class="bg-index" src="../../image/img1.jpg" alt="主頁背景圖">
<div class="bg-color"></div>
</header>
<!-- Tab選項(xiàng)頭部 -->
<div class="Tab-top" id="Tab-top" style="display:none;">
<em>朱棣</em>
<span></span>
<i></i>
</div>
<div class="navMenu flex-center">
<a href="javascript:;"><span class="on">動(dòng)態(tài)</span></a>
<a href="javascript:;"><span>活動(dòng)</span></a>
<a href="javascript:;"><span>粉絲</span></a>
<a href="javascript:;"><span>關(guān)注</span></a>
</div>
<div class="main">
<!-- 用戶發(fā)表的學(xué)科圈 -->
<div class="cir-container">
<div class="cir-box">
<div class="cir-title">
<img src="../../image/img.jpg" alt="人頭像">
<div class="cir-info">
<p class="cir-name">阿呆</p>
<p class="cir-time">5分鐘前</p>
</div>
<div class="cir-rt">
<span class="down-arrow"></span>
</div>
</div>
<div class="cir-content">
學(xué)令贏是一家社會(huì)化共享服務(wù)平臺(tái)，旗下?lián)碛幸扬L(fēng)靡廣東小學(xué)的高趣味、高效多元智力教育系統(tǒng)：學(xué)令牌；
以及服務(wù)全社會(huì)提供休閑、娛樂、商務(wù)、學(xué)習(xí)的萬畝原生態(tài)學(xué)令贏文旅小鎮(zhèn)；以及同時(shí)擁有綠色健康與獨(dú)特體驗(yàn)的新零售平臺(tái)
</div>
<div class="cir-navmenu">
<span><em></em><i>0</i></span>
<span><em></em><i>0</i></span>
<span><em></em><i>0</i></span>
</div>
</div>
<div class="cir-box">
<div class="cir-title">
<img src="../../image/img.jpg" alt="人頭像">
<div class="cir-info">
<p class="cir-name">阿呆</p>
<p class="cir-time">5分鐘前</p>
</div>
<div class="cir-rt">
<span class="down-arrow"></span>
</div>
</div>
<div class="cir-content">
學(xué)令贏是一家社會(huì)化共享服務(wù)平臺(tái)，旗下?lián)碛幸扬L(fēng)靡廣東小學(xué)的高趣味、高效多元智力教育系統(tǒng)：學(xué)令牌；
以及服務(wù)全社會(huì)提供休閑、娛樂、商務(wù)、學(xué)習(xí)的萬畝原生態(tài)學(xué)令贏文旅小鎮(zhèn)；以及同時(shí)擁有綠色健康與獨(dú)特體驗(yàn)的新零售平臺(tái)
</div>
<!-- 1張圖片 -->
<ul class="cell clearfix">
<li class="item">
<img src="../../image/img.jpg" alt="發(fā)表圖片">
</li>
</ul>
<!-- 4宮格圖片 -->
<ul class="cell9 cell4 clearfix" style="display:none">
<li class="item">
<img src="../../image/img.jpg" alt="發(fā)表圖片">
</li>
<li class="item">
<img src="../../image/img1.jpg" alt="發(fā)表圖片">
</li>
</ul>
<!-- 9宮格圖片 -->
<ul class="cell9 clearfix" style="display:none">
<li class="item">
<img src="../../image/img.jpg" alt="發(fā)表圖片">
</li>
<li class="item">
<img src="../../image/img1.jpg" alt="發(fā)表圖片">
</li>
<li class="item">
<img src="../../image/img1.jpg" alt="發(fā)表圖片">
</li>
</ul>
<div class="cir-navmenu">
<span><em class="on"></em><i>0</i></span>
<span><em></em><i>0</i></span>
<span><em></em><i>0</i></span>
</div>
</div>
<div class="cir-box">
<div class="cir-title">
<img src="../../image/img.jpg" alt="人頭像">
<div class="cir-info">
<p class="cir-name">阿呆</p>
<p class="cir-time">5分鐘前</p>
</div>
<div class="cir-rt">
<span class="down-arrow"></span>
</div>
</div>
<div class="cir-content">
學(xué)令贏是一家社會(huì)化共享服務(wù)平臺(tái)，旗下?lián)碛幸扬L(fēng)靡廣東小學(xué)的高趣味、高效多元智力教育系統(tǒng)：學(xué)令牌；
以及服務(wù)全社會(huì)提供休閑、娛樂、商務(wù)、學(xué)習(xí)的萬畝原生態(tài)學(xué)令贏文旅小鎮(zhèn)；以及同時(shí)擁有綠色健康與獨(dú)特體驗(yàn)的新零售平臺(tái)
</div>
<div class="bad-video">
<video class="video" poster="../../image/img.jpg" webkit-playsinline style="object-fit:fill;">
<source src="http://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
您的瀏覽器不支持 HTML5 video 標(biāo)簽。
</video>
<img class="videoPlay" src="../../image/play.png" alt="播放按鈕" tapmode onclick="videoPlay()">
<span class="video-num">591次播放</span>
</div>
<div class="cir-navmenu">
<span><em></em><i>0</i></span>
<span><em></em><i>0</i></span>
<span><em></em><i>0</i></span>
</div>
</div>
</div>
<!-- 活動(dòng) -->
<div class="act-container" style="display:none">
<ul class="act-list">
<li>
<div class="act-top">
<div class="act-toplf">
<p class="act-title">報(bào)名參加了學(xué)令牌活動(dòng)</p>
<p class="act-time">2018-08-16</p>
</div>
<em class="open-icon"></em>
</div>
<div class="act-info clearfix">
<img src="../../image/img.jpg" alt="活動(dòng)圖片">
<div class="act-rtinfo more">
學(xué)令牌第一屆超級大賽
</div>
</div>
</li>
<li>
<div class="act-top">
<div class="act-toplf">
<p class="act-title">在活動(dòng)中獲得了第1名<em class="on"></em></p>
<p class="act-time">2018-08-16</p>
</div>
<em class="open-icon"></em>
</div>
<div class="act-info clearfix">
<img src="../../image/img.jpg" alt="活動(dòng)圖片">
<div class="act-rtinfo more">
學(xué)令牌官方王者對戰(zhàn)
</div>
</div>
</li>
</ul>
</div>
<!-- 粉絲 -->
<div class="Fans-container" style="display:none">
<ul class="fans-list">
<li class="flex-align-center">
<div class="fans-pic">
<img src="../../image/pic.png" alt="人頭像">
</div>
<div class="fans-info">
<p class="fans-name">
用戶名字
</p>
<p class="fans-num">
120人關(guān)注
</p>
</div>
<button class="fans-btn">關(guān)注</button>
</li>
<li class="flex-align-center">
<div class="fans-pic">
<img src="../../image/pic.png" alt="人頭像">
</div>
<div class="fans-info">
<p class="fans-name">
平安
</p>
<p class="fans-num">
快來關(guān)注他吧
</p>
</div>
<button class="fans-btn on">已關(guān)注</button>
</li>
</ul>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
window.onscroll = function(){
var t = document.documentElement.scrollTop || document.body.scrollTop; //獲取距離頁面頂部的距離
console.log(t);
var uptop = document.getElementById( "index-top" ); //獲取div元素
var fixtop = document.getElementById( "Tab-top" ); //獲取div元素
if( t >= 168 ) { //當(dāng)距離頂部超過168px時(shí)
uptop.style.display='none';
fixtop.style.display='block';
$api.attr($api.dom('.wrap'), 'id', 'wrap');//加id="wrap"
$api.attr($api.dom('.main'), 'id', 'main');//加id="main"
} else { //如果距離頂部小于168px
fixtop.style.display='none';
uptop.style.display='block';
$api.removeAttr($api.dom('.main'), 'id');//去掉id為main屬性
$api.removeAttr($api.dom('.wrap'), 'id');//去掉id為main屬性
}
}
</script>
</html>
position;sticky
給主頁所在的那行dom設(shè)置position;sticky
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國IT技能型緊缺人才，是大數(shù)據(jù)專業(yè)的國家
達(dá)內(nèi)教育集團(tuán)成立于2002年，是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機(jī)構(gòu)，是中國一站式人才培養(yǎng)平臺(tái)、一站式人才輸送平臺(tái)。2014年4月3日在美國成功上市，融資1
北大課工場是北京大學(xué)校辦產(chǎn)業(yè)為響應(yīng)國家深化產(chǎn)教融合／校企合作的政策，積極推進(jìn)“中國制造2025”，實(shí)現(xiàn)中華民族偉大復(fù)興的升級產(chǎn)業(yè)鏈。利用北京大學(xué)優(yōu)質(zhì)教育資源及背
博為峰，中國職業(yè)人才培訓(xùn)領(lǐng)域的先行者
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師，曾在博彥科技股份有限公司擔(dān)任項(xiàng)目經(jīng)理從事移動(dòng)互聯(lián)網(wǎng)管理及研發(fā)工作，曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項(xiàng)目經(jīng)理。精通Java與.NET 技術(shù)， 熟練的跨平臺(tái)面向?qū)ο箝_發(fā)經(jīng)驗(yàn)，技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點(diǎn)難點(diǎn)突出、引人入勝。
精通HTML5和CSS3；Javascript及主流js庫，具有快速界面開發(fā)的能力，對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗(yàn)。曾經(jīng)歷任德國Software AG 技術(shù)顧問，美國Dachieve 系統(tǒng)架構(gòu)師，美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多