Anchoring fine within pages, but clicking between pages it’s too low

You are ending up on the correct position of the page and not too far down. What really happens is the sticky menu overlaps your content.

This is the problem with using sticky headers. Sticky in CSS means ‘fixed’ positioning and fixed positioning by definition breaks the typical browser behaviour.

Browsers normally acknowledge elements by placing them in a natural reading order based on the order the elements appear in the code. Fixed position takes the element outside of the natural reading order.

Browsers do many things in the background that you won’t normally be aware of, but will notice when those features are gone. Like this. Browsers handle inline links in a way that moves the viewport (the visible page) down to the section of content. It also moves the keyboard position to that section. It’s really magnificent.

The header element is of fixed position. For this reason the browser does not include the header element inside of its calculation to move the viewport.

What you end up with is the browser scrolling to the section of content, with the sticky header sat on top of the content.

This is why sticky headers suck for developers ??

What you have to do now is try to replicate the browser’s scrolling behaviour in JavaScript to fix this problem.

The fix will involve calculating the height of the header and off-setting the scroll to that height. It is important to note that the height of the header changes from mobile to desktop.

For this change you will need to enqueue 2 JavaScript files:

1. [main.js] This file is going to hold all our modifications
2. [modernizr.js] This file is going to contain a third party library used for detecting the size of the browser. The contents of this file can be found here: https://pastebin.com/tEhW1grm

Start by creating two files inside your Child Theme folder named ‘main.js’ and ‘modernizr.js’.

Oh yes – I read about this when creating the anchors originally – and I did something (not sure what, added padding perhaps?!) to have the scrolling stop a bit further down to compensate. Thanks for the explanation – I can actually understand what’s happening now!

Ok this sounds complicated. I will get started this afternoon!

Thank you very much.

Oops sorry – a quick question – are making (what seem to be) quite big changes like this problematic when updates occur, or if you wanted to change the look / theme of the website at a later date, or by using a child theme do you get around issues like this?

Many thanks

We are not making big changes or changes that would be hard to maintain. We’re going to be loading 2 JavaScript files and modifying the Child Theme functions.php file to load those files.

Hello! Sorry for the big delay, my other job got in the way!

I’ve created those two files in the child theme folder now ??

That’s alright, it’s the same for everyone here ??

This post is more for me to understand what I have to do, because this may take a while to write.

I found the TwentySeventeen theme already resolves this problem for in-page links (as you described in your opening post). It just doesn’t run automatically when you load a new page.

What we need to do (in main.js) is:

1. Check if the page has been loaded with an anchor point in the URI
2. On load (and only on load) find the height of the height of the header
3. Find the offset of the current viewport
4. Add a new offset with the header height + current viewport
5. Add any necessary animations

@carobcn, Replace all of your ‘main.js’ file code with the code from this Pastebin page: https://pastebin.com/2ZzZTgpF

I was wrong about the file ‘modernizr.js’ – You don’t need this. Feel free to remove this file.

For anyone else reading, edit the ‘main.js’ file and (the file should be empty) add the code from this Pastebin page: https://pastebin.com/0sR9WyNj

• This reply was modified 7 years ago by Andrew Nevins.
• This reply was modified 7 years ago by Andrew Nevins.
• This reply was modified 7 years ago by Andrew Nevins.
• This reply was modified 7 years ago by Andrew Nevins.

Great – will do this this afternoon, though yesterday I added the code from this pastebin file into the ‘main.js’ to make the menu on a phone autocollapse – is it possible to use both sets of code? (https://pastebin.com/BPMFMsMV)
Thanks!

Yes I’ve taken that into account in my reply: https://www.ads-software.com/support/topic/anchoring-fine-within-pages-but-clicking-between-pages-its-too-low/#post-9641981

Oh yes I see I misunderstood your post the first time ??

I’ve done that now, the phone menu still auto-collapses but the between-menu scrolling is the same, but sorry if there’s another step!

There’s a problem with the order in which our script loads. Our ‘main.js’ script is dependant on one of the Twenty Seventeen scripts and specifically this script: https://www.roselandpartners.com/wp-content/themes/twentyseventeen/assets/js/jquery.scrollTo.js?ver=2.1.2

What’s happening is our ‘main.js’ file is loading before that script and therefore not working.

What we need to do is make sure our ‘main.js’ file loads after the ‘jquery.scrollTo.js’ script.

To do this you need to edit your Child Theme functions.php file and replace this line:

wp_enqueue_script('child-theme-scripts', get_theme_file_uri( '/main.js' ), array( 'jquery' ), false, true );

With this:

wp_enqueue_script('child-theme-scripts', get_theme_file_uri( '/main.js' ), array( 'jquery-scrollto' ), false, true );

Does that work?

• This reply was modified 7 years ago by Andrew Nevins.

Yes, it’s better! It would be great if it could still land a little higher up, is that possible? Thanks ??

Yes, you see this line in your main.js file:

            newOffset = currentOffset - navigationHeight - 80;

Change the “80” to a higher number to your satisfaction.

Sorry Andrew, I think I might have been mistaken before – this doesn’t actually seem to make any difference (I tried changing the number to 100, 200, 400) but it appeared to land in the same place each time.