Skip to content

Sticky element inside tab (not header) support #21

@centricity-kashifshaikh

Description

@centricity-kashifshaikh

Hi 👋

I’m trying to implement a pattern where:

  • Tabs are sticky (expected)
  • Additionally, each tab has its own sticky sub-header (e.g. search bar)
  • The sub-header should stick below the main header while scrolling

Current structure:

Tab
└── ScrollView
├── SearchBar (should be sticky)
└── Content

Issue:

  • The SearchBar scrolls with content instead of sticking
  • If I move it to HeaderMotion.Header, it becomes global instead of tab-specific

Questions:

  1. Is it possible to have a sticky element inside a tab scrollable (independent of HeaderMotion.Header)?
  2. Or does the library strictly require all sticky elements to be defined inside HeaderMotion.Header?
  3. Any recommended pattern for tab-specific sticky sub-headers?

From my understanding, header + scroll sync requires everything to be part of the same HeaderMotion context, which makes this use case difficult.

Would appreciate clarification 🙏

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions