Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
T treasure
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 12
    • Issues 12
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Packages & Registries
    • Packages & Registries
    • Container Registry
  • Analytics
    • Analytics
    • CI/CD
    • Repository
    • Value Stream
  • Wiki
    • Wiki
  • External wiki
    • External wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • FE
  • treasure
  • Issues
  • #164

Closed
Open
Created May 31, 2023 by JayChen@JayChenOwner

当我们在移动端h5页面使用Sticky等组件时

组件原理: 再移动至指定位置后,为其添加一个fixed,并且填充一个高度一样的背部div去撑开

导致的问题: 再告诉滑动的时候,因为fixed及render,会出现抖动的情况

解决方案: 提前为其挂载fixed,并且设置top为1px,再添加一个 ::beforer, 同样为 fixed,去把顶部1px的间隙填满。
以vant sticky为例

  <div class="full-header-wrapper">
    <Sticky offset-top="1px">
      <div class="full-header">
        <slot></slot>
        <div class="full-header-bottom">
          <slot name="bottom"></slot>
        </div>
      </div>
    </Sticky>
  </div>
.full-header-wrapper {
 &::before {
    position: fixed;
    top: 0px; // 设置成和导航栏一样的高度
    z-index: 99;
    content: '';
    height: 2px;
    width: 100%;
    background-color: #0060E6; // 与头部底色一致
  }
}
Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking