Sticky header and overlap problem for anchors

If you follow this link: http://www.klayz.com/community/welcome-klayz/welcome-klayz/t.3360/p10807/#post10807
you see that the page load the anchor position, then, thanks to a jQuery script, it goes back scrolling the page a little bit in order to solve the sticky elements overlap problems.

This slow down incredibly the process, and I would need to find a better solution. Basically I’d need to set an “height” for the main navigations bar at the top and set them to not overlap the content when I have an anchor. I know that I can do this via CSS using margin-top/bottom, etc. (as described here: http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header and here: http://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors) but in my case it is impossible as I’d need to add them to every anchor in the forums posts.

I gently ask you for some advices on which would be the best way to solve this problem, in your opinion. As always, thanks in advance for any reply.

This is my current jQuery code that auto-scroll the page when you follow an anchor:

! function(t, e, n) {
    var o = !(!e || !e.pushState),
        i = {
            ANCHOR_REGEX: /^#[^ ]+$/,
            OFFSET_HEIGHT_PX: 158,
            init: function() {
                this.scrollIfAnchor(n.hash), $("body").on("click", "a", $.proxy(this, "delegateAnchors"))
            },
            getFixedOffset: function() {
                return this.OFFSET_HEIGHT_PX
            },
            scrollIfAnchor: function(i, r) {
                var s, c;
                return this.ANCHOR_REGEX.test(i) ? (s = t.getElementById(i.slice(1)), s & amp; & amp;
                    (c = $(s).offset().top - this.getFixedOffset(), $("html, body").animate({
                        scrollTop: c
                    }), o & amp; & amp; r & amp; & amp; e.pushState({}, t.title, n.pathname + i)), !!s) : !1
            },
            delegateAnchors: function(t) {
                var e = t.target;
                this.scrollIfAnchor(e.getAttribute("href"), !0) & amp; & amp;
                t.preventDefault()
            }
        };
    $(t).ready($.proxy(i, "init"))
}(window.document, window.history, window.location);

hello friends,
One element will always be ‘deactivated’ when elements overlap. You can control the z-axis to define which element is at the top and thereby remains ‘active’. Use css: z-index for that. Greater number means more in front.

Yup, I know that. Thank you for your reply, pakhi56. But that’s not what I need in this case. :smile:

I’m still searching for a solution on this, but I can only find these type of solutions:

http://dustinfarris.com/2012/02/21/in-page-links-and-fixed-header-overlap.html

:disappointed:

I gave a better solution in this thread than the one you are linking to. However it does involve adding an element above the target to use as the target point which is probably not easy for you to do.

e.g.

<div class="destination" id="link1"></div>
<h2>Destination 1</h2>

The only other option is a script option which it seems you are already using so maybe you would be better off optimising the script (or scripts) so that they work more efficiently. Or perhaps running the anchor script before whatever it is that is delaying your page. However, that is outside my skillset and will need one of the resident js experts to have a look.

1 Like

Yup, thank you PaulOB. Unfortunately I cannot add a new element (div or span) to each anchor-position.
So yes, probably would be best for me to tune up the script that I already have. Again, unfortunately I’m not a JS expert too, so I have no idea if the curent script is okay or could be optimized in some way.

About moving the script, considering that (I suppose) it have tostay below the jQuery call, what could I try exactly (as far as you know)?

PS: I already PMed m3g4p0p… so maybe when he will have some time he will be able to give me some more hints, I hope. :smiley:

Yes @m3g4p0p is very good and probably better to wait for him.

1 Like

I note that you seem to be loading three versions of jquery which is bound to slow things down and not something you should need to do unless you are using features from older packages and then you probably should use the migrate plugin.

1 Like

Umh, you mean in the communuty?

As far as I know I only call it once:

<script data-cfasync="true" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

<script type="text/rocketscript" data-rocketsrc="http://code.jquery.com/jquery-2.1.4.min.js" data-cfasync="true" data-rocketoptimized="true">

(the second one is how it is tranformed by CloudFlare/RocketLoader)

but it’s probably that some plugins are adding other calls to other jQuery versions. How does exactly work the migrate plugin? I see that WordPress have it included in the source code, but I never investigated on it, to be true. :smile:

This is in your source code:

<script data-cfasync="true" data-rocketsrc="http://code.jquery.com/jquery-2.1.4.min.js" type="text/rocketscript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

Haven’t used it myself but I believe it adds support for the features that have been deprecated.

1 Like

Thank you again, PaulOB. I’ll investigate a little bit on this. Thanks!

Hi, sorry for the late reply, still having no internet… :-/ anyway, in case you’re still working on this:

The obvious solution would be not to animate those scrollTop adjustments. ;-) I know it’s tempting to use those fancy effects everywhere, but as far as UX is concerned, less is sometimes more.

Don’t worry at all, I knew that! Thank you so much for you reply!

Yup, I know! :smile:
So, you mean…

scrollIfAnchor: function(i, r) {
                var s, c;
                return this.ANCHOR_REGEX.test(i) ? (s = t.getElementById(i.slice(1)), s & amp; & amp;
                    (c = $(s).offset().top - this.getFixedOffset(), $("html, body").animate({
                        scrollTop: c
                    }), o & amp; & amp; r & amp; & amp; e.pushState({}, t.title, n.pathname + i)), !!s) : !1
            },

removing this part?

 .animate({
                            scrollTop: c
                        })

(just asking as a boob, you know) :sweat_smile:

Don’t remove it altogether – it’s the part which adjusts the scrollTop. Just replace .animate() with .css(); this does the same, but without animation.

1 Like

Thank you a lot, m3g4p0p!
EDIT: Now it stopped working after that mod… :pensive:

I just implemented Velocity.js, and it seems to boost the thing a little bit… what do you think?

Argh, no it won’t work indeed… -.- sorry for the hasty reply! You’d have to replace it with

$('html, body').scrollTop(c)
1 Like

Thank you so much! Now it works perfectly. Even if I’m undecided now. The Velocity.js seems to really speed it up (I mean .animate()). But maybe adding another JS, only for that, it is too much.

I’ve found that velocity.js handles the animations much better and ‘can’ work with or without jquery. The speed increase is especially noticeable on mobile where jquery animations just jump but velocity slides smoothly.

If you are just correcting an anchor jump when coming from another page then the animation isn’t really needed. If you are scrolling to links in the same page then a scroll effect is good so that the user sees where they are going.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.