Anchor Links with Fixed Header Part II

Asif Ahmed

In yesterday’s post we saw how to link to the middle of a page. However, when we add a fixed header this will mess things up. If you look at the example page, in the sidebar click on “C”. This will push the paragraph that starts with C all the way to the top behind our header. Ideally we would want to jump to the content but we able to actually view the content. The only reason we can even the “C” paragraph now is because the opacity on the header is less than 100%. This is for testing purposes to show you that the content is still behind the header.

How do we go about fixing this problem? When we link to the middle of the page and jump to that content, we want to be able to view the content, not have it hidden behind the header. The best resources I have found for fixing this problem are on the CSS Tricks website and on Nicolas Gallager’s website. The both explain various ways to solve this problem. Often the problem is that though one option may work in one browser, it won’t work in another. To be frank, the problem is almost always Internet Explorer. Internet Explorer is a pain for web developers and designers. Internet Explorer often refuses to adhere to web standards and only in IE10 (which is only out for Windows 8 currently) does it implement more HTML5 functionality. Therefore often developers have to implement a fallback when creating on IE.

Let’s go over the easiest way to fix our broken jumping to the middle of the page. Before we for the link “B” in the sidebar with href value of “b”, we set the ID of an element (paragraph or div) to “b” in the body. We will need to change this. At the beginning of our “B” paragraph in the body we will need to an anchor tag with no href value but with an ID of “b”. It would look something similar to this.

<a id="b">&nbsp;</a>

. The nonblocking space (the ampersand with nbsp) has to be there or else the browser will think that nothing is there and remove the anchor tags. Now we will need to add in some CSS for the anchor tag with ID “b”. Here is the CSS we will associate with it.

#b{
position:relative;
top:-150px;
}

As you see we will only need two CSS properties. We will make the position relative and we will basically add a margin up top of -150px. 150 pixels is the size of our fixed header. Go and check it out. If you click on “B” in the sidebar the “B” paragraph will properly show in the content. If you are using Firefox, Chrome, or Safari this should work. However this will fail in IE9 and IE7 (but work fine in IE8). This is fixed for the “A” link in the sidebar. Here is the CSS associated with the link “A”.

#a {
padding-top:150px;
margin-top:-150px;
-webkit-background-clip:content-box;
background-clip:content-box;
}

Basically I experimented with what worked from Nicolas Gallagher’s site and found a solution that worked for most browsers. If you go back to our example page you will see that the “A” link works on IE7, IE8, and IE9 (all we really should care about is IE8 and IE9). Nicolas Gallagher’s page has 5 different methods of trying to create this functionality of jumping to the middle of the page with a fixed header. I would suggest figuring out which one works best for you.

Over the next few days we will be covering form validation, form submission, and sending emails with PHP!