Fixed header influences anchors

Question

I have a strange issue on a page I created. It has a fixed header (two headers layered on each other actually) and left panel with anchors which scrolls to certain part of the page using jQuery plugin ScrollTo, when onclick event is triggered.

However it doesn't work as it should. When I click the link, it scrolls to the paragraph and it skips the title. I did a little research and found out, that it works, when there's no height or width parameter on the fixed header. I really have no idea how to fix it, can anybody help please?

You can see the page (with sample content) here: http://codepen.io/anon/pen/ByBqBW

Again, thanks for any answer.

Answer 1

The scroll is working correctly, but your fixed header is getting in the way. You just need to not scroll quite all the way to the element, right? Luckily, you can set the offset for the scroll like this:

$.scrollTo('#description', 500, {offset:-50});

Answer 2

I had a problem like this one time when using the scroll to links. What I did that kinda helped was let's say I had the link to the description you're talking about...

<a name="description"></a>

Would be the link in your navigation. Then the link for description would be something like:

<a href="#description"></a>

That kind of functionality usually goes to the bottom of the link, at least that is what I was told by the developer that helped me fix mine. So he suggested to put it a line above where it needed to be. For example:

<a href="#description"></a>
<h2>description</h2>
<p>Some text</p>

If that doesn't work, try wrapping all of it in the anchor and see if that works for you. I hope that helps, I'm still kinda new at this.