Hi @alexhollender, @nray had a question about the animation. Should the animation apply for hiding as well as showing the sticky header?

• Reveal the sticky header when the top of the viewport is below the bottom of the first heading (h1)
• Hide the sticky header when the top of of the viewport is above the bottom of the first heading (h1)

@alexhollender Can you please review the above acceptance criteria and ensure those are accurate specs?

In T290101#7329172, @nray wrote:

@alexhollender Can you please review the above acceptance criteria and ensure those are accurate specs?

they look good to me, thanks

Turns out IntersectionObserver is not supported in Safari 9.1 and IE 11 - do we need to support these browsers?

There is a polyfill we can use.

No need to support those browsers, just make sure to feature detect their availability. We should not throw JavaScript errors in these browsers.

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

[mediawiki/skins/Vector@master] Make sticky header functional/visible

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

@alexhollender do you have a preference for whether the sticky header should or shouldn't have an exit animation? In the prototype (https://di-community-round-2.web.app/Audre_Lorde), the header doesn't have an exit animation - is that intentional?

In T290101#7337785, @nray wrote:

@alexhollender do you have a preference for whether the sticky header should or shouldn't have an exit animation? In the prototype (https://di-community-round-2.web.app/Audre_Lorde), the header doesn't have an exit animation - is that intentional?

that is not intentional. it should have an animation in both cases.

Change 719346 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Make sticky header functional/visible

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

@Edtadros the sticky header QA is not high priority right now, when you have QAed everything else please reach out to me for QA steps.

Test Result - Beta

Status: ✅ PASS
Environment: beta (local)
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Add the following to local settings:

$wgVectorStickyHeader = [
	'logged_in' => true,
	'logged_out' => false
];

Log in to a local instance and scroll above and below the first h1 element (page title).
✅ AC1: You should see the sticky header when scrolling past the bottom of the 1st h1 and it should disappear when scrolling to above the bottom of the 1st h1.

✅ AC2: Enable "Reduce motion" in accessibility settings and test scrolling above/below 1st h1 - note that the sticky header appears/disappears with no animation.