Page MenuHomePhabricator

[Minerva TOC] Update sticky header on scroll
Closed, ResolvedPublic3 Estimated Story Points

Description

User story

As a mobile user, I want to keep oversight of where I am at while I am scrolling throughout an article

Requirements

The sticky header always reflects the name (and edit link) of the (sub)section (or the main page title) whose content is currently at the top of the mobile screen.
"section" here means more than only the h2's (as was the case for the earlier sticky headers prototype), and refers to all levels of depth, i.e. everything shown in TOC.

Design

https://phabricator.wikimedia.org/T410325#11413314

Acceptance criteria

  • Title & edit link in the sticky header are accurately updated once the relevant section title crosses the top of the viewport
    • For both upward and downward scroll
    • For all depths of titles, from main page title down to small subsections
  • The "subtitle" (short description) is only used for the main page (page title) section
  • In TOC, the section currently at top of the page shows as bold

Event Timeline

egardner moved this task from Incoming/Inbox to Needs Refinement on the Reader Growth Team board.
egardner set the point value for this task to 3.Jan 14 2026, 5:33 PM
egardner moved this task from Needs Refinement to Ready on the Reader Growth Team board.

Per T416244

  1. The bold text should be an on-state giving user feedback for which section they're in. A reader's current section should be bold text and have the base colour. What happens now: the [Top] item in the Toc stays bold regardless of where you are on the article and what you've clicked. What should happen: the current section that the readers is on should have the active styling. Clicking on a link in the ToC should make that item have the active style. Scrolling should "move" the active style down the ToC link list.

^ This seems fitting to handle in this ticket - I have added an AC for this

Change #1237237 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/ReaderExperiments@master] Accurately update sticky header on scroll

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

Change #1237287 had a related patch set uploaded (by LWatson; author: LWatson):

[mediawiki/extensions/ReaderExperiments@master] Minerva TOC: use Codex Menu to display table of contents

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

Change #1237237 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Accurately update sticky header on scroll

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

Change #1238718 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/ReaderExperiments@master] Finetune active header scroll detection

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

Change #1238718 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Finetune active header scroll detection

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

Etonkovidova subscribed.

Checked on enwiki beta and compared with the current TOC on desktop - looks & behaves as per the specs.

All subtitles depth - Page Title -> Sub-heading 4 (six levels of headings)

Screenshot 2026-02-12 at 9.45.10 AM.png (1×1 px, 110 KB)
Screenshot 2026-02-12 at 9.46.15 AM.png (1×666 px, 80 KB)

dark mode

Screenshot 2026-02-12 at 10.07.17 AM.png (1×1 px, 143 KB)

Note: Unrelated to the scope of the task

  • sub-heading 3 and sub-heading 4 do not displayed bold on mobile - checked on enwiki beta and testwiki 15:
desktopmobile
Screenshot 2026-02-12 at 10.22.50 AM.png (1×842 px, 130 KB)
Screenshot 2026-02-12 at 10.23.10 AM.png (1×942 px, 125 KB)
lwatson subscribed.

Thanks @Etonkovidova!

sub-heading 3 and sub-heading 4 do not displayed bold on mobile - checked on enwiki beta and testwiki 15

I checked on beta and haven't noticed this issue on the page section headers (eg. https://en.wikipedia.beta.wmcloud.org/wiki/Spanish_language?mpo=minerva-toc-sticky:treatment). The h3 and h4 elements should still be bold on Minerva because we haven't touched the page section headers. The active section title in the table of contents has bold text.

The screenshot displays the "History" section title in bold text.

Screenshot 2026-02-12 at 8.24.23 PM.png (269×334 px, 20 KB)

Note that on beta, it's showing visited font color. I don't believe we want that and can address it in a separate commit.