uni-app XBuilder X 版本 3.1.13.20210514 h5页面使用fixed定位出错

uni-app XBuilder X 版本 3.1.13.20210514 h5页面使用fixed定位出错

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 window 10
HBuilderX 正式
HBuilderX版本 3.1.13
手机系统 全部
手机厂商 华为
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

测试过的手机

一加8

示例代码

<uni-view class="notices_head">头部</uni-view>  
.notices_head{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100rpx;
line-height: 1;
}

操作步骤

.notices_head{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100rpx;
line-height: 1;
}

预期结果

固定位置是从 导航底部之后起算

实际结果

固定位置是从 导航头部的位置 起算

bug描述

h5页面，想固定view在顶部0的位置，但是固定之后，不是在导航下，而是跟导航一样的位置，并且被覆盖

image


更多关于uni-app XBuilder X 版本 3.1.13.20210514 h5页面使用fixed定位出错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

top不应该设置为0，应该设置为 top: var(–window-top); 可以看下文档 https://uniapp.dcloud.io/frame?id=css变量

更多关于uni-app XBuilder X 版本 3.1.13.20210514 h5页面使用fixed定位出错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的，谢谢

所以是更新了对吗，因为之前一直使用 0的

在 uni-app 的 H5 环境中，使用 position: fixed 定位时，元素默认会相对于视口（viewport）定位，这可能导致其与页面导航栏重叠。这是因为 H5 页面在部分浏览器或 WebView 中，导航栏不属于视口的一部分，top: 0 会使元素紧贴视口顶部，从而被导航栏覆盖。

要解决此问题，可以通过 CSS 调整 top 值，使其从导航栏下方开始定位。首先，获取导航栏的实际高度（通常通过 uni.getSystemInfoSync() 获取状态栏高度，并加上导航栏自身高度），然后在样式中设置 top 为该计算值。例如，如果导航栏总高度为 44px，则 CSS 可修改为：

.notices_head {
  position: fixed;
  top: 44px; /* 根据实际导航栏高度调整 */
  left: 0;
  right: 0;
  height: 100rpx;
  line-height: 1;
}

如果导航栏高度动态变化，建议在 Vue 组件的 onLoad 或 mounted 生命周期中使用 JavaScript 计算并设置样式。例如：

onLoad() {
  const systemInfo = uni.getSystemInfoSync();
  const statusBarHeight = systemInfo.statusBarHeight;
  const navBarHeight = 44; // 假设导航栏固定高度为44px，需根据实际情况调整
  this.navBarTotalHeight = statusBarHeight + navBarHeight;
}

在模板中动态绑定样式：

<uni-view class="notices_head" :style="{ top: navBarTotalHeight + 'px' }">头部</uni-view>
回到顶部