Fixed topbar vs named anchors - 【StackMirror】|css|positioning

I have a topbar with position:fixed which also contains anchor links (<a href="#someid">jdjd</a>).

The problem is that the target is placed in the top of the viewport (behind the fixed topbar).

how can I fix so the the browser scrolls so that the target is shown just below the topbar?

2012-04-04 06:13
by jgauffin

Not sure why you're being downvoted, it seems like an honest a good question.

I'd put a margin-top on the viewport, equal to the height of the fixed topbar.

http://jsfiddle.net/justiceerolin/KfMLJ/ as an example

2012-04-04 06:17
by Justice Erolin

Not sure what you mean by "viewport", but giving body or html a margin-top will not affect where the browser scrolls. What I think the OP needs to do is either give the elements you can scroll to a margin-top or add some click events to the links that override the default scroll and instead scrolls to the position of the target element - top bar height - powerbuoy 2012-04-04 06:28

Example code: http://jsfiddle.net/justiceerolin/KfMLJ/ Class "container" is the viewport - Justice Erolin 2012-04-04 06:33

Hmm unsure what that's supposed to prove? (links don't even point to anything so impossible to test). But, if by viewport you mean the element being scrolled to then we're on the same page - powerbuoy 2012-04-04 06:35

As far as i know there is no clean soloution. If you use inline scrollbar it can be achieved, but it needs a fixed height then.

2 soloutions found using CSS: http://css-tricks.com/hash-tag-links-padding/

Else you could pretty easy use JQUERY to measure the users height, put it into a container div, and have scrolling on that.

See: http://jsfiddle.net/jpGdu/

Another soloution could be giving the element ur linking to a padding top (if it's h1 or whatever) :)

2012-04-04 06:33
by Marco Johannesen