I’m having a strange problem with the text navigation links on my one-page site. (NAV > link)
All the text links in my top nav successfully jump to other sections further down the page. But the links only work once, if I click on them again to move back up the page, the page shifts slightly but that’s it.
Strangely enough, the button works totally fine, it’s just the text nav links.
I was able to get this working, I initially thought it could have been a bug. Its do do with how you’re setting up the sticky elements and also using them as an anchor.
I was still getting some scroll issues though, but if you remove the id of the sticky header and move it to the section this should help. There are browser issues when you try to use a sticky element also as an anchor element. So the second click, the browser finds it tough to move because it’s kind of saying “hey, you want me to move, but this sticky element won’t let me, because it’s the anchor, and sticky.” (if browsers could talk)
Note: When you update/move an existing id you will need to re-link it from the nav menu again.
Had the same issue on a client’s one-pager , the fix was moving the IDs off the sticky nav and onto the actual section wrappers, then re-linking them in the menu. That way the browser isn’t fighting the sticky header when jumping back.
There’s one small resulting problem that I’m working through. The jump moves down just a bit too far, where the next part of the section is initially hidden by the subheader. You can see it in your loop above in the Work Samples section, where the first image is partly hidden. I can manually add spacing to fix this, but this makes the page a bit longer.
Is there a way to adjust the exact vertical position of the “jump-to point”? Does that make sense?
Note, for anyone else who happens to find this thread and having a similar problem … you need to add and link to a new section, one that’s completely separate from the anchored or sticky section. It can’t be nested within the anchored or sticky section.