Anchor not scrolling correctly

Question

I have a layout something along the lines of :

<div class="banner"></div>
<div class="content"></div>

My banner has position:fixed; and is roughly 200px high.

The problem is that when I click a link with a fragment identifier, the page scrolls and the anchor (with the identifier) sits at the top of the page, behind the banner instead of under the banner where it can be seen.

Is there something (CSS or jQuery) that I am missing ?

you can only compensate for this if you use javascript scrolling and add/subtract the height of the banner accordingly.. that is the whole point of `position:fixed`.. to get it out of the normal document flow.. Alternatively, you could wrap the rest of your site with a div, and style it so you only scroll inside that.. — Gabriele Petrioli, Jun 29 '10 at 18:11

score 1 · Accepted Answer · edited May 23 '17 at 10:32

This is a dup of Div anchors scrolling too far

For the requests to see sample code, I've put a full sample page here: https://gist.github.com/denised/5924370.

The key bit is the presence of two divs (#header and #mainbody) and the following bit of css (which I believe is a fairly standard way to create a fixed header):

#header {
  position:fixed; 
  left:0; right:0; top:0;
  background-color: #F0F0E8;
  z-index:2;
}

#mainbody { 
  position: absolute;
  top: 150px;
}

Anchor not scrolling correctly

1 Answers1