[AppBar] useScrollTrigger breaks when AppBar position is sticky
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
https://codesandbox.io/p/devbox/angry-ramanujan-gyn43g
- Use
position="sticky"on AppBar - Use
Collapseto hide some nested content - Observe content shaking and
useScrollTriggerconstantly changing it's value
Current behavior
AppBar content is shaking if you scroll slowly
https://github.com/user-attachments/assets/dd2f9931-fc26-43c1-a89c-f058a5449dc8
Expected behavior
Collapsed content that depends on scroll direction inside of sticky AppBar should not shake and act smoothly
Context
See the video in "Current behavior" section
Your environment
npx @mui/envinfo
System:
OS: macOS 15.5
Binaries:
Node: 20.12.2 - ~/.asdf/installs/nodejs/20.12.2/bin/node
npm: 10.5.0 - ~/.asdf/installs/nodejs/20.12.2/bin/npm
pnpm: Not Found
Browsers:
Chrome: 138.0.7204.158
Edge: Not Found
Safari: 18.5
npmPackages:
@emotion/react: ^11.14.0 => 11.14.0
@emotion/styled: ^11.11.0 => 11.11.0
@mui/core-downloads-tracker: 7.0.2
@mui/icons-material: ^7.0.2 => 7.0.2
@mui/lab: ^7.0.0-beta.10 => 7.0.0-beta.10
@mui/material: ^7.0.2 => 7.0.2
@mui/material-nextjs: ^7.0.2 => 7.0.2
@mui/private-theming: 7.0.2
@mui/styled-engine: 7.0.2
@mui/system: 7.0.2
@mui/types: 7.4.1
@mui/utils: 7.0.2
@mui/x-charts: ^8.0.0 => 8.0.0
@mui/x-charts-vendor: 8.0.0
@mui/x-internals: 8.0.0
@types/react: ^19.1.5 => 19.1.5
react: ^19.1.0 => 19.1.0
react-dom: ^19.1.0 => 19.1.0
typescript: ^5.6.3 => 5.6.3
Search keywords: useScrollGrigger sticky AppBar
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox reproduction and trace the AppBar, Collapse, and useScrollTrigger entry points involved when AppBar uses position="sticky". Reproduce the shaking while scrolling slowly, then add a regression test or equivalent verification showing that scroll-direction changes remain stable and the collapsed content moves smoothly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100