[Resolved] Offset anchors with fixed header

Home Forums Support Offset anchors with fixed header

Viewing 15 posts - 1 through 15 (of 58 total)
  • Author
    Posts
  • #70078
    theonetruevlad

    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

    #70835
    Tom
    Lead Developer
    Lead Developer

    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>
    #189775
    xyz

    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?

    #189818
    Tom
    Lead Developer
    Lead Developer
    #189891
    xyz

    no, that didn’t appear to work.

    #189950
    Tom
    Lead Developer
    Lead Developer

    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

    #190025
    xyz

    Thanks Tom, this looks like it could be something that’d work. I’ll let you know.

    #190230
    xyz

    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

    #190231
    xyz

    …sorry, should have been this…
    <h2><span style=”color: #1e72bd; font-size: 14pt;”>Economics and economists</span></h2>

    #190232
    xyz

    hnnnnn,
    it’s still missing the anchor when I copy and paste
    sits immediately before Economics

    #190233
    xyz

    oh for pete’s sake
    “<.a id=”economics”</a.>” without the fullstops and quotation marks

    #190242
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #190493
    xyz

    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.

    #190494
    xyz

    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

    #190498
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    • This reply was modified 4 years, 4 months ago by Tom.
Viewing 15 posts - 1 through 15 (of 58 total)
  • You must be logged in to reply to this topic.