Currently, the sticky header feature flag enables the sticky header for everyone.

Is this true? It looks like feature is already equipped to do this and toggling the logged_out flag in my LocalSettings seems to work?

The sticky header should be hidden below the device-tablet-desktop threshold. e.g. If I resize my browser (e.g. to 800px) it should disappear.

The feature requirements listed in the epic might need to be updated if this is the case:

From T283505:

The header must be adaptable at lower screen resolutions (down to 500px)

Is this true? It looks like feature is already equipped to do this and toggling the logged_out flag in my LocalSettings seems to work?

Sounds like less work for the implementer then :) We might want to add an additional guard e.g. throw a runtime exception when logged out is enabled as we're not planning to support that for now.

The feature requirements listed in the epic might need to be updated if this is the case:

For context, we have decided to scope the feature to desktop only for the time being as we build out version 1. We plan to add this later based on time and feedback. So the epic is correct, and we should consider that future need while building. Does that make sense? I'm making a goal card which will hopefully clear this up.

of note.. if you add a sticky header, your anchor (section links) will anchor to behind ur header... which can be rather confusing.. might want to think about that as well when implementing this..

In T289714#7309830, @TheDJ wrote:

of note.. if you add a sticky header, your anchor (section links) will anchor to behind ur header... which can be rather confusing.. might want to think about that as well when implementing this..

Thanks @TheDJ, that's a great point. I wonder if this would be a good use case for using scroll-padding. I recorded a gif of what that might look like with the sticky header (please ignore the title on the sticky header, that's a bug):

Edit: Turns out scroll-padding doesn't currently work with Safari and jump links 🤦: https://caniuse.com/?search=scroll-padding

In T289714#7309797, @Jdlrobson wrote:

For context, we have decided to scope the feature to desktop only for the time being as we build out version 1. We plan to add this later based on time and feedback. So the epic is correct, and we should consider that future need while building. Does that make sense? I'm making a goal card which will hopefully clear this up.

Thanks @Jdlrobson, that makes sense

Change 717481 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Restrict sticky heaader visibility

https://gerrit.wikimedia.org/r/717481

@nray i was thinking that maybe its acceptable to auto hide the header upon navigating to an anchor after a couple ms. Then whenever you scroll it would unhide ? might be worth an experiment.

Change 717481 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Restrict sticky heaader visibility

https://gerrit.wikimedia.org/r/717481

@nray I had a similar issue with an earlier ToC prototype. Not sure whether or not this is a good practice but what I did was create an empty <span> element that's absolutely positioned 55px above the anchor link. When the browser scrolls the anchor link into view the span element acts as a spacer/padding sort of thing. In this case it's applied to the mini toc in the corner of the page, but I imagine the same approach could be used in the case of the <h2> elements.

https://di-toc-supplementary.web.app/Sushi

Please test this one on https://patchdemo.wmflabs.org/wikis/7d133396d0/wiki/Spain

Test Result - Beta

Status: ✅ PASS
Environment: patchdemo
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: The sticky header should never show if I am not logged in (note: the second version of the sticky header will include a version for anons)

✅ AC2: If I disable JavaScript the sticky header should never show

✅ AC3: The sticky header should be hidden below the device-tablet-desktop threshold. e.g. If I resize my browser (e.g. to 720px) it should disappear.