uni-app 页面顶部栏固定悬浮的 css 兼容方法 - DCloud问答

来源： uni-app 页面顶部栏固定悬浮的 css 兼容方法 – DCloud问答

uni-app 中 NavigationBar（导航栏 44px）以及 TabBar（底部选项卡 50px）组件的高度是固定的，不可修改，各小程序平台，包括同小程序平台的 iOS 和 Android 的高度也不一样。

那么如果我们需要悬浮导航菜单则需要使用 position: sticky 来使其悬浮，然后对于 H5 平台加上 top:44px 的高度，这样 uni-app 页面顶部导航栏的固定悬浮就实现了兼容，具体的代码如下：

复制代码.menu {  
    position: sticky;  
    /* #ifdef H5 */  
    top: 44px;  
    /* #endif */  
    /* #ifndef H5 */  
    top: 0;  
    /* #endif */  
    z-index: 999;  
    flex: 1;  
    flex-direction: column;  
    overflow: hidden;  
    background-color: #ffffff;  
}

以上代码纯属子凡开发中简单的需要稍微注意的地方，仅供大家学习参考。

其中 position: fixed 虽然也可以悬浮固定，但是底部的元素就无法继承 top 的值了，可以简单说 fixed 是特殊版的 absolute，fixed 元素总是相对于 body 定位的。所以就需要使用 position: static，static(没有定位)是 position 的默认值，元素处于正常的文档流中，会忽略 left、top、right、bottom 和 z-index 属性。

除非注明，否则均为泪雪博客原创文章，禁止任何形式转载

本文链接：https://zhangzifan.com/uni-app-navigationbar-position-static.html