-
Notifications
You must be signed in to change notification settings - Fork 26.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
<Link> not scrolling top sticky header #64441
Comments
Some scuffed workaround for me is to use
This way the top of each |
Yes thanks I'm using this solution in my production application but I have nested layouts that I can't use. |
This comment was marked as off-topic.
This comment was marked as off-topic.
The element check for if it should scroll (specifically topOfElementInViewport
true even though it's not fully in the viewport because of the position: sticky element. We'll have to figure out some special handling for that case 🤔
|
I've noticed some funniness with this sort of thing too, it's good to see an issue for it. @timneutkens if you or your team look into this further then perhaps one option could be to take into account the value of the CSS property It's a modern CSS way of preventing a sticky header from overlapping content that you scroll to via anchor links, Although, some people also use |
What an annoying issue. I read in the documentation that it's supposed to scroll to the top of the page (i.e. barely scroll to cover the top of whatever the page.tsx outputs), but this is clearly not what people always want. I want to put a simple padding in my layout so that the page fits neatly in the site, but when I do that it no longer scrolls to the top. I have to wrap the padding or page in a custom component that I have to import into every page, which defeats the purpose of having the layout in the first place. I also tried using a template, but since it goes off of pages, this didn't work either. I should be able to override the default behavior and have more control over where the scroll boundaries are. I am unfortunately not experienced enough to contribute myself, but I would look into that. |
hello everyone may this help you guys |
It happens even on: Next.js Documentation. It is related to the common pattern of having a sticky navigation and the check done in With such sticky navigation, it is usual to set const scrollPaddingTop = Number(window.getComputedStyle(document.documentElement).scrollPaddingTop) || 0; |
Some sites use Maybe Next could check for the value of a specific CSS custom property and it could be up to the individual Next.js site to keep that custom property updated and correct? |
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/header-no-scroll-nextjs-x84kd3?embed=1&file=%2Fapp%2Flayout.tsx
To Reproduce
Current vs. Expected behavior
A sticky header is present at the top of the layout (it has an opacity of 0.8 for viewing the page below).
If the scroll height is lower than the header height and I click on the link to another page, the scroll doesn't return to the top of the page.
On the other hand, if the scroll height is greater than the header height, then the scroll does return to the top of the page as expected.
Enregistrement.de.l.ecran.2024-04-12.a.23.31.18.mov
Provide environment information
Which area(s) are affected? (Select all that apply)
App Router
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local), next start (local)
Additional context
No response
NEXT-3099
The text was updated successfully, but these errors were encountered: