Deprecated: pk_vd_gt_validate(): Implicitly marking parameter $args as nullable is deprecated, the explicit nullable type must be used instead in /home2/xzgzscom/public_html/xzgzs.com/wp-content/themes/puock/inc/fun/core.php on line 1290
uni-app页面自动固定顶部的悬浮菜单栏代码 css 兼容方法 - 小志工作室 uni-app页面自动固定顶部的悬浮菜单栏代码 css 兼容方法 – 小志工作室

uni-app页面自动固定顶部的悬浮菜单栏代码 css 兼容方法

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

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

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

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

正文完
 0