CODEWITHSUNDEEP
htmlcssnav
JD Vangsness
JD Vangsness

Reputation: 697

Link to Page Anchor pad top

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.

Upvotes: 1

Views: 225

Answers (2)

user2915403
user2915403

Reputation:

+1 to @Nit suggestion. I like that it works beautifully well on inline and block level elements, wouldn't have thought.

http://jsfiddle.net/gCs7C/

HTML:

<nav>
    <a href="#hash">Scroll to content</a>
</nav>
<div>Spacer</div>
<div>
    Spacer<br />
    <span id="hash">Content</span>
</div>

CSS:

html, body {
   padding: 0;
   margin: 0;
}

div {
    height: 1000px;
}

nav {
    position: fixed;
    height: 24px;
    width: 100%;
    background-color: yellow;
}

#hash {
    padding-top: 24px;
    margin-top: -24px;
}

Upvotes: 0

Etheryte
Etheryte

Reputation: 25325

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.

Upvotes: 2

Related Questions