Skip to content

feat(home): 首页工具条 ik-home-toolbar 滚动置顶 #76

Description

@HKLHaoBin

需求描述

希望首页顶部工具条 .ik-home-toolbar 在页面滚动时保持固定在视口顶部(置顶 / sticky),行为参考顶部导航 .ik-header__inner 所在的 .ik-header

当前行为

  • .ik-home-toolbar 位于 app/pages/index.vue,包含频道分类 Tab(最新 / 各频道)以及 feed 切换(关注 / 收藏),右侧还有在线人数展示。
  • 当前样式为 position: relative; z-index: 1;,会随页面内容一起滚动离开视口。
  • 用户向下浏览瀑布流时,无法快速切换频道或 feed,需要滚回顶部才能操作。

期望行为

  • 滚动页面时,.ik-home-toolbar 始终可见并固定在顶部区域。
  • 交互体验与 .ik-header 一致:不随内容滚动而消失。
  • 若与 .ik-header 同时存在,工具条应吸附在 header 下方,避免遮挡或被遮挡。

参考实现

.ik-header 已使用 sticky 置顶(app/components/AppHeader.vue):

.ik-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #000;
}

.ik-home-toolbar 可考虑类似方案,例如:

  • position: sticky
  • top 设为 header 高度(桌面约 78px,移动端需适配)
  • 补充背景色,避免下方内容滚动时透出
  • 设置合适的 z-index(低于 header 的 50,但高于列表内容)

相关文件

  • app/pages/index.vue.ik-home-toolbar 模板与样式(约 L835、L1039)
  • app/components/AppHeader.vue.ik-header sticky 参考(约 L723)

验收标准

  • 首页向下滚动时,频道 Tab 与 feed 切换始终可见
  • .ik-header 层级、间距正确,无重叠遮挡
  • 桌面端与移动端(≤768px)均表现正常
  • 横滑频道 Tab(移动端)在 sticky 状态下仍可正常使用

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions