Link to Page Anchor pad top

Question

I have a sticky navigation on the top of my page and i also have one as the right column.

My problem is that when i link the side navigation to an anchor it scrolls the page to that anchor and puts it behind the top navigation.

Is there anyway that i can have it so it scrolls the page to 100px above the actual anchor so it isn't behind the top sticky navigation?

I am using bootstrap with affix-top on the top navigation and data-spy="scroll" and alsoaffix` on the right column navigation

bold

Since i am using the data-spy="scroll" this affects the way that the scrollspy works since the anchor goes behind the top navigation before it changes the spy on the side navigation.

This is why i ant to have an offset on my anchor.

Answer 1

As long as you can set this up so that it won't interfere with the rest of your layout, the following is an easy manner to do what you want:

Sample Jsfiddle: http://jsfiddle.net/qWHgR/

selector {
    padding-top: 200px;
    margin-top: -200px;
}

I'm not personally familiar with Scrollspy so you may have to make some minor changes to it if the offset becomes a problem.