移动端H5开发之顶部固定导航布局

在开发移动端h5应用时，尤其是在开发混合app时，一般情况下，顶部导航会一直固定在页面头部，如下图：

h5的常规操作是直接来个fixed定位，代码如下：

position:fixed;
top:0;
left:0;
right:0;

但是，这种写法，在ios系统下，会出现一些，类似下拉页面时，导航会一起滚动，无法固定在屏幕顶部，或者是有input标签的时候，调出软键盘之后，页面无法往上顶，导致标签被挡住，尤其是在414屏，效果更严重

为解决这些兼容性问题，建议使用如下两种布局：

其一：position:absolute 

首先构建一个width: 100%;height: 100%;overflow:hidden;的容器，在此容器中，分离顶部导航跟内容区，顶部导航为absolute定位，内容区为滚动区，这样即可达到导航固定在顶部，页面可滚动，整体代码如下：

    .view {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 1;
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        width: 100%;
    }
    .content {
        overflow-y: scroll;
        position: absolute;
        width: 100%;
        height: 100%;
    }

这种方式在于对overflow的了解深度，越透彻，越容易理解。。。

其二： flex布局

将整体页面一分为二，头部跟内容区，flex方向为垂直即可

代码如下：

.view {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
}
.header {
    
}
.content {
    overflow-y: scroll;
}

如有布局问题，请留言哦