QQ小程序里怎么让自定义组件在页面滚动时固定在顶部？

一慧玲提问于 2026-02-10 19:22:27 阅读 80

移动

我在做一个QQ小程序页面，顶部有个自定义导航组件custom-navbar。想让它在页面滚动时固定在顶部，但试了position: fixed一直没效果。页面结构是这样的：


<custom-navbar></custom-navbar>
<scroll-view scroll-y class="content">
  <!-- 长列表内容 -->
</scroll-view>

样式里给导航组件加了：


custom-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
}

但滚动时组件直接消失不见了，页面内容像是覆盖在固定组件上面。用微信开发者工具调试发现元素确实定位在最外层了，但就是显示不出来…是不是QQ小程序对fixed有特殊限制？

我来解答赞 11 收藏

反馈

2 条解答

开发者宝娥 Lv1

这问题在WP里面也遇到过类似的，fixed定位有时候会被父容器吃掉。QQ小程序和微信小程序在这方面坑是一样的。

你这种情况是因为scroll-view内部的fixed定位其实是相对于这个scroll-view的，不是相对于整个页面。解决方案有两种：

第一种是把导航栏放到scroll-view外面：

第二种是干脆不用fixed，改用sticky定位：



custom-navbar {

  position: sticky;

  top: 0;

  z-index: 999;

}

我建议用第一种方案，更稳定。sticky在小程序里有时候会有兼容性问题，特别是QQ小程序。fixed的问题在于它必须相对于视口，放在scroll-view里就废了。

顺便吐槽下，这些小程序框架的定位问题真是祖传bug，从微信传到QQ一个都没改...

2026-03-05 22:10

怡博 ☘︎ Lv1

QQ小程序里 fixed 定位在自定义组件上确实有坑，你遇到的问题很常见。核心原因是 scroll-view 的滚动不会触发页面级的滚动事件，所以 fixed 元素没法正常定位，而且容易被层级覆盖。

正确的做法是把 custom-navbar 提到 scroll-view 外面，并且用 sticky 布局代替 fixed。你可以这样改结构：

<view class="container">

  <custom-navbar class="sticky-nav"></custom-navbar>

  <scroll-view scroll-y class="content">

    <!-- 长列表内容 -->

  </scroll-view>

</view>

然后样式改成：

.container {

  display: flex;

  flex-direction: column;

  height: 100vh;

}



.sticky-nav {

  position: -webkit-sticky;

  position: sticky;

  top: 0;

  z-index: 999;

  background: #fff;

}



.content {

  flex: 1;

  overflow-y: auto;

}

这样做有几个关键点：要用 -webkit-sticky 兼容小程序内核；z-index 要提上去避免被盖住；外层容器控制高度，让 scroll-view 不撑出页面。

如果你非得用 fixed，那必须把 custom-navbar 放到页面根节点下，比如通过插槽或动态插入到 page-wraper 最外层，否则 fixed 会相对于错误的包含块定位。但强烈建议用 sticky，更稳定，也不用做额外的层级校验和兼容处理。

2026-02-10 19:23