Change Details

Currently the sticky header displays unconditionally on page load to JavaScript users. # Specification [] 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) [] The sticky header should slide in/out [] The sticky header animation should respect user preferences around prefers-motion (see T254399 for more information about this user preference, do not attempt to generalize it at this time) # Developer notes Use IntersectionObserver. See @nray patches.

Currently the sticky header displays unconditionally on page load to JavaScript users. # Specification [x] Reveal the sticky header when the top of the viewport is below the bottom of the first heading (h1) [x] Hide the sticky header when the top of of the viewport is above the bottom of the first heading (h1) [x] The sticky header should slide in/out [x] The sticky header animation should respect user preferences around prefers-motion (see T254399 for more information about this user preference, do not attempt to generalize it at this time) # Developer notes Use IntersectionObserver. See @nray patches. # 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). - 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. - Enable "Reduce motion" in accessibility settings and test scrolling above/below 1st h1 - note that the sticky header appears/disappears with no animation.

Currently the sticky header displays unconditionally on page load to JavaScript users. # Specification [x] Reveal the sticky header when the top of the viewport is below the bottom of the first heading (h1) [x] Hide the sticky header when the top of of the viewport is above the bottom of the first heading (h1) [x] The sticky header should slide in/out [x] The sticky header animation should respect user preferences around prefers-motion (see T254399 for more information about this user preference, do not attempt to generalize it at this time) # Developer notes Use IntersectionObserver. See @nray patches. # 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). - 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. - Enable "Reduce motion" in accessibility settings and test scrolling above/below 1st h1 - note that the sticky header appears/disappears with no animation.