实现滚动时页面伸缩效果

不知道怎么起这篇文章的标题就能表达出我实现的页面效果，

项目背景：嵌在原生开发的APP中。

上图给大家看一下

左侧图片代表开启app时页面的展现效果苹果x向上滑动界面设置，右侧为页面滑动时的效果。

因为原生开发的APP有导航栏的，所以按照你们封装的抛出H5的API，将导航栏设置为透明色苹果x向上滑动界面设置，这样才可以将原生开发的导航栏的背景色去掉。

首先说一下整个页面的布局。

因为这个布局我是用fixed定位写的，尤其是前面红色区域中上方的标题Tab切换部分滑到底部时固定。所以使用的页面的布局代码大致如下

<body>
     <div class="container">
    <header class="headBox">
    　　<ul class="headerList">
        <li class="header-item">
        　　　　<i class="indexIcon scan"></i>
            <p class="header-title">按钮一</p>
        </li>
        <li class="header-item">
        　　<i class="indexIcon authorze"></i>
        　　<p class="header-title">按钮二</p>
        </li>
        <li class="header-item">
            <i class="indexIcon lending"></i>
            <p class="header-title">按钮三</p>
        </li>
      </ul>
    </header>
    <section class="mainBox">
       <ul class="navList">
        <li class="nav-item actived">列表一</li>
        <li class="nav-item ">列表二</li>
        <li class="nav-item">列表三</li>
        </ul>
       <div class="" id="main">
        <div class="topBox">
        　　<div class="topMain">
            <!--合同列表-->
            　　<div class="contractList ">
                <div class="top">
                    <div class="search-box">搜索</div>
                    <div class="contract-nav">
                    　　<span class="nav-style actived">全部</span>
                       <span class="nav-style">状态一</span>
                       <span class="nav-style">状态二</span>
                    </div>
                </div>
                <div class="main">
                    <ul class="allContract list-style">
                        <!--有数据时-->
                        <li class="list-item">
                        　　<span class="contract-status">状态一</span>
                           <p class="contract-title">标题</p>
                        　　<div class="content">
                            <i class="contract-num"></i>
                            <p class="content-style">编码</p>
                           </div>
                        　　<div class="content">
                            <i class="contract-firm"></i>
                            <p class="content-style">公司名称</p>
                        　　</div>
                            <i class="dots"></i>
                            <div class="content">
                            　　<i class="contract-dept"></i>
                                   <p class="content-style">部门名称</p>
                            </div>
                        </li>
                        <li class="addMore">更多</li>
                    </ul>
                　　</div>
                </div>
            　　　　</div>
              </div>
            <section class="lawCon">
                <div class="law-title">法务区域</div>
            </section>
        </div>    
    </section>    
　　</div>    
</body>

这个的这个container布局引入的是fixed定位，头部也是用的固定定位，这样整体的文档流中都是固定定位的。在主体内容区域中，由于滑到底部时，nav导航栏要求是固定的，所以，将这部分的发力放在主体布局的底部，滚动区域之外，这样js在页面滑动时，将整个的主体区域固定位置就可以了。

css样式如下：

*{
                margin:0;
                padding:0;
                list-style: none;
            }
            body{
                background: #EFEFF4;
            }
            .none{
                display:none;
            }
            .container{
                width:100%;
                height:100%;
                position:fixed;
                top:0;
                left:0;
            }
            .headBox{
                width:100%;
                height: 4rem;
                display: flex;
                background: #30A2FC;
                position: fixed;
                top:0;
                left:0;
            }
            .headerList{
                width:100%;
                display: flex;
                position:fixed;
                top:1.76rem;
                left:0;
            }
            .header-item{
                width:33.33%;
                text-align: center;
            }
            .header-item .indexIcon{
                display: block;
                width:.8rem;
                height:.8rem;
                margin:0 auto .3rem auto;
                
            }
            .header-item .scan{
                background: url(img/scan.png) no-repeat;
                background-size: 100%;
            }
            .header-item .authorze{
                background: url(img/authorize.png) no-repeat;
                background-size: 100%;
            }
            .header-item .lending{
                background: url(img/lending.png) no-repeat;
                background-size: 100%;
            }
            .header-item .header-title{
                font-size: .14rem;
                color:#FFFFFF;
            }
            .mainBox{
                width:100%;
                position:fixed;
                top:3.53rem;
                left:0;
                box-sizing: border-box;
                padding: 0 .16rem;
                background: transparent;
            }
             .navList{
                display: flex;
                padding-top: .49rem;
                background: #FFFFFF;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                
            }
             .navList .nav-item{
                width:33.33%;
                font-size: .32rem;
                color: #898989;
                text-align: center;
            }
             .navList .nav-item.actived{
                font-weight:500;
                color:#252525;    
            }
             .navList .nav-item.actived::after{
                content:"";
                display: block;
                width:58%;
                height:2px;
                background: #000000;
                margin:.2rem 21%;
            }
            .topBox{
                width:7.18rem;
                min-height: 7rem;
                background: #FFFFFF;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                box-sizing: border-box;
                box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.1);
            }
        
            
            .contractList .search-box,
            .authorzeList .search-box{
                float:right;
                margin-right:.24rem;
                font-size: .24rem;
                color: #C2C2C2;
            }
            .contractList .search-box::after,
            .authorzeList .search-box::after{
                content:"" ;
                display: inline-block;
                width:.18rem;
                height: .18rem;
                border:1px solid #C6C6C6;
                transform: rotateZ(45deg);
                border-bottom-color: transparent;
                border-left-color: transparent;
                
            }
            .contractList .contract-nav{
                display: flex;
                width:66%;
                justify-content: space-around;
            }
            
            .contractList .contract-nav .nav-style{
                font-size: .28rem;
                color: #959595;
                font-weight:400;
            }
            .contractList .contract-nav .nav-style.actived{
                color: #2D8DF1;
            }
            .contractList .contract-nav .nav-style.actived::after{
                content:"";
                display: block;
                width:100%;
                height:2px;
                margin-top:.16rem;
                background: #2D8DF1;
            }
            .contractList .list-style {
                margin-top:.48rem;
            }
            .list-style .list-item{
                width:7.02rem;
                height:2.47rem;
                background: #FFFFFF;
                border-radius: .2rem;
                box-sizing: border-box;
                padding: .22rem .24rem;
                margin: .2rem 0.08rem;
                box-shadow: 0 0 3px 3px #F5FAFE;
            }
            .list-style .list-item .dots{
                display: block;
                width: .4rem;
                   height: .4rem;
                float:right;
                background:url(img/dots-horizontal-roun.png) no-repeat;
                background-size: 100%;
            }
            /*状态样式*/
            .list-style .list-item .contract-status{
                float: right;
                font-size: .26rem;
                line-height: .68rem;
                color:#FA8F35;
            }
            
            .list-style .list-item  .hasApplyed{
                color: #2D8DF1;
            }
            .contract-num,.contract-firm,.contract-dept{
                display:inline-block;
                width:.3rem;
                height:.3rem;
                margin-right:.1rem;
            }
            .contract-num{
                background: url(img/contractNum.png) no-repeat;
                background-size: 100%;
            }
            .contract-firm{
                background: url(img/confirm.png) no-repeat;
                background-size: 100%;
            }
            .contract-dept{
                background: url(img/contract-category.png) no-repeat;
                background-size: 100%;
            }
            .list-style .list-item  .contract-title{
                width: 80%;
                white-space: nowrap;
                overflow-x: hidden;
                text-overflow: ellipsis;
                font-size: .32rem;
                color:#000000;
                font-weight: 400;
                
            }
            .list-style .list-item .content{
                display:flex;
                margin:.2rem 0;
            }
            .list-style .list-item  .content-style{
                font-size: .24rem;
                color: #333333;
                width:68%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .list-style  .addMore{
                text-align: center;
                font-size: .24rem;
                line-height: 2;
                color: #111111;
            }
            .list-style .nodataImg{
                width: 64%;
                margin: 0 18%;
            }
            .authorzeList .list-style::before{
                content: "";
                display: block;
                clear: both;
            }
            .list-style .list-item .list-label{
                color: #8F8E94;
                font-size: .24rem;
            }
           
            .lawCon{
                width:7.18rem;
                height: 4rem;
                box-sizing: border-box;
                padding: .44rem .28rem .22rem .28rem;
                background: #FFFFFF;
                border-radius: 10px;
                box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.1);
                margin-top:.2rem;
            }
            .lawCon .law-title{
                font-weight:600;
                font-size: .32rem;
                color: #252525;
            }

这个的页面布局就是现在你们看见的这么。js去控制页面滑动时触发的事件

首先rem对应px的js

由于我们的设计图是750px的，所以是除以的750比例

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px';

接下来说一下在页面滑动时的js事件

首先要按照屏幕大小确认页面可滚动区域的高度，然后修改主体部分距离顶部的top值就好

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/shouji/article-127064-1.html