XF 1.5 Sticky header = anchors in the wrong place. How do I offset them please?

[Stuart Wright]

Hello folks.
So our sticky header over at www.avforums.com means that anchors in threads are in the wrong place.
The sticky header covers up the first 94 pixels of the page.
e.g. https://www.avforums.com/threads/the-blu-ray-ripping-guide-for-media-streamers.917696/#post-8705811
^ click it and you will see the post it links to is part hidden by the header.

So what I want to do is have anchors in each post moved up by 94 pixels.

I actually fixed this problem in our editorial system by adding hidden div anchors using the class anchorOffset.

.anchorOffset {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}

(I actually shift them up a round 100 pixels to make it look a little better).

My question is what template changes are needed to add new, hidden anchors which are used instead of the existing ones in messages? By doing this would it negatively affect SEO or anything else?
Thanks in advance for any help you can give.

 

[Stuart Wright]

Anyone?

 

[Mouth]

My question is what template changes are needed to add new, hidden anchors which are used instead of the existing ones in messages?

I use this within EXTRA.css and it works great ...

/* Scroll browser back up slightly when using URL anchors to allow for sticky header */
:target:before {
    content:"";
    display:block;
    top: -100px;
}

Eg. https://netrider.net.au/threads/my-slide-on-the-weekend.235075/#post-3116832

 

[rainmotorsports]

Anyone?

There are several ways to do it. Javascript / Jquery has a total of 3 methods I know.

I wrote this one as to do it differently than @BassMan when making my free addon:

$(window).bind( 'hashchange', function() {
        offset = getcombinedheight();
        $('html, body').animate({'scrollTop': $(window.location.hash).offset().top - (offset + 20)});
    });

CSS only methods are okay but usually alter the page by adding space, etc. Usually it resolves itself but I never liked it.

With JS methods you just respond to the hashchange event and then do whatever you want. You don't need to animate. You can do a scroll by or even try to scroll to an element.

 

[Dad.]

Definitely best to do this as far up the page with JavaScript, ideally not jQuery as you are attempting to catch a hard coded browser behavior as well. But yep an offset is best as @rainmotorsports suggests. One of the harder problems for sure.