Page navigation with fixed header

问题:

I have a horizontal fixed header on top of my site and when I use page navigation to scroll to an ID, it puts the content I'm trying to scroll to underneath the header.

Is there a way I can offset where the page navigation shows up by 80 pixels (down)?

Edit: I was actually able to fix it myself in the simplest and most acceptable manner possible. I put the solution in an answer below.

回答1:

Well, since no one else had an answer, I fixed it myself.

Here is the fix:

JSFiddle

This was done by making a hidden div that is absolutely positoned 'x' amount of pixlels above the content I want to scroll to. I then scroll to that div instead of the content I originally wanted to scroll to. 'x' should be the height of your header, this way the content you want to scroll to appears directly below your header like it should.

回答2:

You can do that with CSS.

HTML:

<header>Your Header Here</header>
<div id=main>Rest of Content</header>

CSS:

header { position: fixed; height: 80px; }
#main { margin-top: 80px; }

回答3:

Try reading this artcle from Chris Coyier. He cleverly uses a pseudo-element to solve the "fixed header in page navigation" issue. Take a look: http://css-tricks.com/hash-tag-links-padding/.

回答4:

The example doesn't show how it works. I fixed it by adding:

#header {
    opacity:0.5;
}
#content-scroller {
    height:120px;
}