移动端h5 顶部菜单栏_移动端H5开发之顶部固定导航布局

一般我们都是用fixed来固定定位，代码如下：

position:fixed;

top:0;

left:0;

right:0;

但这样会出现很多的问题：

类似下拉页面时，导航会一起滚动，无法固定在屏幕顶部，或者是有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;