js怎么做类似于微博主页的滚动效果？

如下图：
刚开始主页是这样显示的：
当向上滑到一定距离时，逐渐变成头部固定在顶部，如下图：
当又向下滑时回到第一张图，自己试了下监听滚动条做效果但是达不到想要的效果，求大神告知，谢谢
代码如下：
<!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选项头部*/
          .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;}

          /*动态*/
          .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;}

          /*活动*/
          .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>关注 4</span>
                      <span>粉丝 0</span>
                    </p>
                </div>
            </div>
            <img class="bg-index" src="../../image/img1.jpg" alt="主页背景图">
            <div class="bg-color"></div>
        </header>

        <!-- Tab选项头部 -->
        <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">动态</span></a>
            <a href="javascript:;"><span>活动</span></a>
            <a href="javascript:;"><span>粉丝</span></a>
            <a href="javascript:;"><span>关注</span></a>
        </div>
        <div class="main">
          <!-- 用户发表的学科圈 -->
          <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">
                      学令赢是一家社会化共享服务平台，旗下拥有已风靡广东小学的高趣味、高效多元智力教育系统：学令牌；
                      以及服务全社会提供休闲、娱乐、商务、学习的万亩原生态学令赢文旅小镇；以及同时拥有绿色健康与独特体验的新零售平台
                  </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">
                      学令赢是一家社会化共享服务平台，旗下拥有已风靡广东小学的高趣味、高效多元智力教育系统：学令牌；
                      以及服务全社会提供休闲、娱乐、商务、学习的万亩原生态学令赢文旅小镇；以及同时拥有绿色健康与独特体验的新零售平台
                  </div>

                  <!-- 1张图片 -->
                  <ul class="cell clearfix">
                       <li class="item">
                          <img src="../../image/img.jpg" alt="发表图片">
                       </li>

                  </ul>

                  <!-- 4宫格图片 -->
                  <ul class="cell9 cell4 clearfix" style="display:none">
                       <li class="item">
                          <img src="../../image/img.jpg" alt="发表图片">
                       </li>
                       <li class="item">
                          <img src="../../image/img1.jpg" alt="发表图片">
                       </li>

                  </ul>

                  <!-- 9宫格图片 -->
                  <ul class="cell9 clearfix" style="display:none">
                       <li class="item">
                          <img src="../../image/img.jpg" alt="发表图片">
                       </li>
                       <li class="item">
                          <img src="../../image/img1.jpg" alt="发表图片">
                       </li>
                       <li class="item">
                          <img src="../../image/img1.jpg" alt="发表图片">
                       </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">
                      学令赢是一家社会化共享服务平台，旗下拥有已风靡广东小学的高趣味、高效多元智力教育系统：学令牌；
                      以及服务全社会提供休闲、娱乐、商务、学习的万亩原生态学令赢文旅小镇；以及同时拥有绿色健康与独特体验的新零售平台
                  </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 标签。
                    </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>

          <!-- 活动 -->
          <div class="act-container" style="display:none">
              <ul class="act-list">
                  <li>
                      <div class="act-top">
                          <div class="act-toplf">
                              <p class="act-title">报名参加了学令牌活动</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="活动图片">
                          <div class="act-rtinfo more">
                              学令牌第一届超级大赛
                          </div>
                      </div>
                  </li>
                  <li>
                      <div class="act-top">
                          <div class="act-toplf">
                              <p class="act-title">在活动中获得了第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="活动图片">
                          <div class="act-rtinfo more">
                              学令牌官方王者对战
                          </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人关注
                          </p>
                      </div>
                      <button class="fans-btn">关注</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">
                              快来关注他吧
                          </p>
                      </div>
                      <button class="fans-btn on">已关注</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 ) { //当距离顶部超过168px时
              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>
js怎么做类似于微博主页的滚动效果？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？
