Background
We will be running an A/B test on the mobile site which looks at opening all sections by default and will compare to the current, closed by default behavior
Requirements
- On pageload, all sections should be open by default
- As the user scrolls down the page, the section header they are on will be pinned to the top of the page
- Tapping on the section header will collapse the section
- As the user switches between sections, the section which is scrolled into view will be the one pinned to the top of the page
Design
Prototype: https://vector-2022.vercel.app/sticky-section-headers (note that this prototype shows sections as collapsed by default. We would expect sections to be open by default, but section header behavior is as expected)
- Only h2 headings stick
- headings should keep their edit icon or lack thereof
- If a user deep links to a closed H2 section, open it
- If a user deep links to an h3 or lower section, open it's parent h2 seciton if it isn't already and scroll the target section into view.
- open H2 sections should "push up" other open h2 sections when they meet
- closed h2 sections don't stick
Acceptance Criteria
- Introduce a new RL module in ReaderExperiments which should be loaded based on the new URL param (per T408045)
- This module should contain JS/CSS code that enhances the .mf-collapsible-heading elements (created by MobileFrontend) with some additional behavior, similar to https://vector-2022.vercel.app/sticky-section-headers
- Any changes to MobileFrontend code should be minimal; if we find that more extensive modifications to that code are needed, this task should be re-estimated or broken up
Other considerations
Relying on Intersection Observer may require excluding certain legacy browsers from the experiment.