I designed a page with a semi-transparent navigation bar at the top which is fixed to the top by using position: sticky & top: 0. It looks cool & works nice until I jump to a certain object by using the fragment in the URI (/page#obj-id) because it jumps so the target is directly at the top, semi-hidden by the navigation bar. So each time I need to scroll further down to be able to interact with the target, which is not good.

I don't want to modify the HTML structure (like defining a hidden object to be target slightly above) because the site should stay structurally correct & easy to parse. I don't want to add JavaScript either (only if necessary) because the site should be possible to use without.

So I would like to "kind of" configure a margin to the top for the jump. I tried to surround all the content aside the navigation bar in its own div to be able to define such a margin, but it had no effect to the jump itself. I could make this inner div scrollable and define body unscrollable, but then the scrollbar wouldn't look good either as it doesn't use the full space on the side.

TL;DR: I want a solution to How can I jump to a point slightly above the fragment identifier? but (mostly) without changing the main HTML structure & without introducing JavaScript.

CodePudding user response：

You can use scroll-margin-top: (height of header); and add it to the element you link to with your anchor tag