移动端分类吸顶需用position: sticky，但Bootstrap 5的.sticky-top默认仅在≥576px生效，须通过@media (max-width: 575.98px)覆盖为.sticky-xs并设top: 0；同时避免父容器overflow或transform导致失效，并确保z-index≥1030且禁用will-change以保障真机流畅性。
移动端分类吸顶需要 position: sticky，但 Bootstrap 5 默认不启用
Bootstrap 5 的 .sticky-top 类确实支持吸顶，但它默认只在 ≥576px（sm 断点）生效，而移动端（尤其是竖屏手机）宽度通常为 375px–414px，落在 xs 范围，此时类名根本不会触发样式。这是最常被忽略的兼容前提。
解决方法是覆盖默认响应式行为：
- 给元素同时添加
.sticky-top和自定义 class（如.sticky-xs） - 在 CSS 中单独为
max-width: 575.98px媒体查询启用position: sticky - 必须设置
top值（如top: 0），否则即使 sticky 生效也无视觉效果
@media (max-width: 575.98px) {
.sticky-xs {
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
}
}
分类栏结构要避免父容器 overflow: hidden 或 transform
position: sticky 在父级有 overflow: hidden、overflow: auto、transform、perspective 等属性时会失效——这是移动端吸顶失败的第二大原因，尤其常见于 Bootstrap 的 .container-fluid + .row 嵌套或轮播图组件之后。
检查并调整 DOM 层级：
- 吸顶元素应直接位于「滚动容器」（通常是
或<main></main>）下，不要嵌在.card、.modal-body或带transform的动画区域里 - 若必须嵌套，确保最近的非
static定位祖先没有overflow或transform - 用浏览器开发者工具检查「Computed」面板中
position是否被降级为static
吸顶后 z-index 不够导致被遮挡？优先级必须高于内容区
Bootstrap 默认组件（如 .navbar、.offcanvas）z-index 值集中在 1000–1100 区间，而 .sticky-top 的 z-index 是 1020。如果分类栏下方用了 .card（z-index: 1）、.dropdown-menu（z-index: 1000）或自定义弹层，就可能盖住吸顶栏。
稳妥做法是显式提升：
- 给分类栏加
style="z-index: 1030;"（避开 Bootstrap 的 1020/1000 冲突） - 或定义新 class：
.sticky-category { z-index: 1030; } - 避免用
!important覆盖其他组件的 z-index，而是统一管理层级体系
真机测试时吸顶卡顿？禁用 will-change 并确认滚动容器
iOS Safari 和部分安卓 WebView 对 position: sticky 的渲染优化较弱，若配合 will-change: transform 或父容器设置了 scroll-behavior: smooth，极易引发掉帧甚至完全失灵。
实操建议：
- 移除所有对吸顶元素或其父级设置的
will-change - 确保页面主滚动发生在
或明确指定的data-bs-spy="scroll"容器上，而非某个.overflow-auto的局部区域 - 如需平滑滚动，改用 JS 监听
scroll事件 +requestAnimationFrame控制 class 切换，比纯 CSS sticky 更可控
吸顶本身很简单，但移动端的“简单”全藏在这些边界条件里：断点没对上、父容器偷偷加了 overflow、z-index 撞车、或者 Safari 正在默默放弃渲染。调的时候别只盯着 sticky，先看 computed style 里 position 还在不在。
