How to scroll 100vh fullscreen sections exactly to the top of viewport (below header) with anchor links?

[Daryl_Shaw]

I have a page with several sections, each set to 100vh fullscreen height. There is a sticky header with a semi-transparent background above it on the top. As soon as I move back and forth between the sections with anchor links, the sections will only be scrolled to the lower edge of the header. As a result, the lower end of the section above shines through under the semi-transparent header and a strip of the current section with height of header is out of viewport at the bottom.

How can I ensure that each section (including the first and last) always scrolls in such a way that the top edge remains at the top edge of the screen (below the header)?

[tristup]

Hi Daryl,

Thanks for reaching out.
I have checked the mentioned page in multiple browsers but didn’t find any problems. Can you please provide any screenshot marked with the issue or any video that helps us recognize the problem?

Thanks

[Daryl_Shaw]

Ok, see Screenshots:

1

Inital load of section 1: OK

2

Scrolled to 100vh fullwidth section 2 via anchor link:
Section 2 stops at the bottom of the header (thin cyan line), but it should fill the whole viewport (blue line).
As a result, only part of the section is shown (area red line), the lowest part (in size of the header, green area) is missing. A piece of section 1 shows under the semi-transparent header (green line).

3

shows the desired / correct position of section 2 (after manually pushing it up)

4

same with scrolling to section 3

Scrolling with anchor links only moves the sections to the lower edge of the header.
This may make sense for opaque headers, but not for transparent ones.

I don’t want to shorten the sections by the height of the header, but always have them fullscreen.
So how do I get the actual top of the viewport as the anchor point?

[christian]

Hey @Daryl_Shaw,

We had a workaround for this but it doesn’t work now. I’ll post this in our issue tracker as a feature request so our development team will see the use case I they might drop a workaround as a reply here or will add a feature for this.

Please stay tuned.

[Daryl_Shaw]

Hi @christian, thanks for passing this on to the developers.

Additional question to this: Can I get the current height of the header in a value that I can include in a calc () formula? Something to use like: calc(100vh - {headerheight})?

(As info for adressed developers: I’ve now temporarily solved my offset problem with “vertically shifted” divs. So it doesn’t look as faulty on my site as described in the post above.
Since I have already found many questions on the subject of anchor to header offset in the forum, I consider this to be an important issue. It is certainly not too difficult to make this offset value adjustable, so that one can choose where the anchor point is (e.g. at top of viewport or at lower edge of the header). Thanks for an update on this!)

[marc_a]

Hey @Daryl_Shaw,

We’re glad that you’re able to temporarily solve your current issue. On the other hand, regarding the header height, it can be done using JS/JQuery code and it will fall under customization. Regretfully, customization is outside the scope of our theme support. You may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

Thank you for understanding.