#careers url fragment overwritten by #getinvolved

[gruns]

the url fragment #careers gets incorrectly overwritten/replaced by #getinvolved after clicking Careers in the navbar and never gets set to #careers when you scroll to the bottom of the page

to repro:

1. go to https://strn.network/
2. click Careers in the navbar in the upper right
3. page navigates to the careers section correctly
4. but look in the url bar: the url is https://strn.network/#getinvolved when it should be https://strn.network/#careers

this bug depends on where in the page you are when you click Careers in the navbar. if youre at the top of the page and click Careers, the final url is https://strn.network/#getinvolved. but if youre already at the careers section and click Careers again, the page doesnt scroll (bc youre already at the careers section) but the url changes to the correct https://strn.network/#careers

correct behavior: the url fragment should always be #careers after clicking Careers in the navbar and when scrolled down the bottom of the page. currently, when you just scroll down to the very bottom of the page, the fragment remains #getinvolved when it should switch to #careers, too

[juliangruber]

I can't reproduce this, for me it only changes to #getinvolved when I scroll up a little.

EDIT: I can reproduce with a larger Window, where it can't scroll down far enough to show the Careers section at the top

[benjaminpreiss]

I'll try to explain the problem here before presenting possible solutions:

Very high screens lead to multiple sections being in the viewport simultaneously.
Whenever a new section enters from below by scrolling, we have to select the "active" section of the ones in the viewport.
Currently, this selection is coded to favor the topmost section.

That in return results in the last section never being selected on big viewports, because you can not scroll down past the footer (as can be seen in the following screenshot)

Knowing this, there are multiple possible solutions to this problem:

1. Add space at the bottom of the footer to enable scrolling to the last section
2. Add space around the last section in viewport relative units.

We can combine both strategies by adding 33vh space around the last section AND the footer, which will lead to the last section being scrollable

[benjaminpreiss]

Adding 25vh around both footer and last section, we can achieve reasonable results:

This of course will not work on ALL screens. When the viewing screens are too high and the viewport coverage of footer and last section combined fall below 25vh, the problem returns. That said, I believe in a pragmatic selection of which viewport sizes we want to support.

[juliangruber]

Is there a website that found a solution that works no matter the viewport size?

[benjaminpreiss]

AFAIK there is not - Changing the url depending on scroll position is tricky...

But if you find one, please let me know! I will also put some more research and thought into this.