Archived topic
Offset anchors with fixed header
57 replies · Started by theonetruevlad on January 29, 2015
When I use jump links the anchor is at the top of the page which is no good as it sits behind the fixed header. I need to offset the anchor position so it is visible. This needs to work when it is a #anchor item in the URL.
I have tried a CSS solution but I have not managed to get it to work.
This is the anchor location that needs to be jumped to.
<h2 id="section1" class="offset">Section I Heading</h2>
This is the custom CSS to give it an offset.
.offset:before {
display: block;
content: " ";
height: 150px; /* Give height of your fixed element */
margin-top: -150px; /* Give negative margin of your fixed element */
visibility: hidden;
}
I have seen suggestions of using these as well
position: relative;
vertical-align: top;
z-index: -1; /* This prevents any links being behind the offset block and un-clickable */
This doesn't work, it is in my Custom CSS plugin area.
The other option is Java script, but I don't know where to stick it and not have it interfere with the code for the sticky header.
/**
* Check an href for an anchor. If exists, and in document, scroll to it.
* If href argument omitted, assumes context (this) is HTML Element,
* which will be the case when invoked by jQuery after an event
*/
function scroll_if_anchor(href) {
href = typeof(href) == "string" ? href : $(this).attr("href");// If href missing, ignore
if(!href) return;// You could easily calculate this dynamically if you prefer
var fromTop = 50;// If our Href points to a valid, non-empty anchor, and is on the same page (e.g. #foo)
// Legacy jQuery and IE7 may have issues: http://stackoverflow.com/q/1593174
var $target = $(href);// Older browsers without pushState might flicker here, as they momentarily
// jump to the wrong position (IE < 10)
if($target.length) {
$('html, body').animate({ scrollTop: $target.offset().top - fromTop });
if(history && "pushState" in history) {
history.pushState({}, document.title, window.location.pathname + href);
return false;
}
}
}// When our page loads, check to see if it contains and anchor
scroll_if_anchor(window.location.hash);// Intercept all anchor clicks
$("body").on("click", "a[href^='#']", scroll_if_anchor);
I hope this is a nice interesting challenge rather than an epic hassle, cheers
Javascript is the best way to go for you.
You can add it to GP Hooks in the wp_footer hook.
Make sure to wrap the above JS in script tags like this:
<script>
// Your JS in here
</script>Hi Tom,
I just pasted the above javascript into the wp_footer hook and ticked execute PHP. But I can't see any difference.
Is there something else I need to do?
Try this instead: https://jsfiddle.net/ianclark001/aShQL/
no, that didn't appear to work.
I've been trying to work this into the plugin itself - it's very hard to get any consistent results I'm afraid.
This topic might help: http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header
Thanks Tom, this looks like it could be something that'd work. I'll let you know.
Hi Tom,
this is one of my anchors, placed before a heading.
<h2><span style="color: #1e72bd; font-size: 14pt;">Economics and economists</span></h2>
I have tried adding
a.anchor {
display: block;
position: relative;
top: -250px;
visibility: hidden;
}
in various places and it hasn't worked. I've tried encasing it in below it and it hasn't worked.
Any chance you could let me know exactly what I need to paste in and where?
Thanks
oh for pete's sake
"<.a id="economics"</a.>" without the fullstops and quotation marks
I'm pretty sure to the a.anchor CSS needs to be coupled with an anchor like this:
<a class="anchor"><!-- anchor in the page --></a>
That should work :)
sorry Tom, still not entirely sure where to put everything. I understand that were trying to tell it that it needs to jump to the anchor and then adjust it's position relative to the anchor.
Here's what I have so far.
At the top of the page:
"<span style="font-size: 11pt;">Economics and economists</span>"
waaaaaay down the bottom of the page, the position I want to jump to:
"<h2> Economics and economists</h2>"
If you could let me know *exactly* how to change the CSS, as I'm just dipping my big toe in all this, I'd be grateful. I'm happy to tweak the pixel offset distance, I just need to get it to work first.
I suspect for my sanity and yours, it would be good if you could let me know what I need to do to paste exact code in these messages... sorry for doing the complete newbie at you over so many messages
If you highlight your code and click the "code" button in the editor above, it will make it a lot easier to post.
So at the top, you would have:
<a href="#my-section">My section</a>
Then you would have your section:
<a name="my-section class="anchor"><!-- a section --></a>
Then this CSS:
a.anchor {
display: block;
position: relative;
top: -60px; /* height of sticky navigation */
visibility: hidden;
}