不知道怎么起这篇文章的标题才能表达出我实现的页面效果，
项目背景：嵌在原生开发的APP中。
上图给大家看一下
左侧图片代表进入app时页面的展示效果，右侧为页面滑动时的效果。
因为原生开发的APP有导航栏的，所以根据他们封装的抛出H5的API，将导航栏设置为透明色，这样才可以将原生开发的导航栏的背景色去掉。
首先说一下整个页面的布局。
因为这个布局我是用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值就好
window.onload = function(){ var totalHeight = window.screen.height; var topDistance = $('.mainBox').position().top; var navListHeight = $('.navList').height(); $('#main').css({'height':(totalHeight-topDistance-navListHeight)+'px','overflow':'auto'}) } var mainPart = document.getElementById('main'); var startX, startY, moveEndX, moveEndY, Y; mainPart.addEventListener('touchstart',function(e){ startX = e.touches[0].pageX; startY = e.touches[0].pageY }) mainPart.addEventListener('touchmove',function(e){ var topDistance = $('.mainBox').position().top; var distance = $('html').css('font-size').split('px')[0]; distance = Number(distance) * 3.53; var topVal = $(this).scrollTop(); moveEndX = e.changedTouches[0].pageX; moveEndY = e.changedTouches[0].pageY; X = moveEndX - startX; Y = moveEndY - startY; if ( Y > 0 && Math.abs(Y)>Math.abs(X)) { if ( topVal<=30) { $('.mainBox').css('top',distance+'px') } }else if ( Y < 0 && Math.abs(Y)>Math.abs(X) ) { var result = topDistance-topVal>60?(topDistance-topVal):60; $('.mainBox').css('top',result+'px') } })