Maniphest T197718

Build sticky header navigation in beta
Closed, DeclinedPublic5 Estimated Story Points
Actions

Assigned To

None

Authored By

	ovasileva
	Jun 19 2018, 6:24 PM

Description

Background

In T193772: [Research] In-article navigation user testing we tested a number of prototypes for in-article navigation. We settled on sticky headers as the best way forward

Acceptance criteria

This should be in beta and replace the back to top feature
Build sticky header navigation as per the prototype in https://in-article-navigation.firebaseapp.com/sticky-headers.html
for non-js browsers sections should remain expanded by default
as user scrolls headings attach themselves to top of screen
if user scrolls past a new heading any previous headings are detached from top of screen
For tablets:
do not remove toc
do not collapse all sections

Developer notes

We can do this in CSS only with CSS feature queries - https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
A very recent post in the MDN newsletter considered sticky headers https://medium.com/@joshmarinacci/sticky-headers-for-your-css-tables-5488eb013914

Related Objects
Search...

Status	Assigned	Task
Resolved	• alexhollender_WMF	T149690 Rethink in-article navigation on mobile web [Prototype]
Duplicate	None	T277717 [EPIC] Make the header sticky
Open	None	T151115 [EPIC] Improve in-article navigation
Declined	None	T197718 Build sticky header navigation in beta
Declined	None	T199157 [Spike ??hrs] Sticky header instrumentation

Event Timeline

ovasileva triaged this task as Medium priority.Jun 19 2018, 6:24 PM

ovasileva created this task.

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 19 2018, 6:24 PM

ovasileva added a subscriber: • alexhollender_WMF.Jun 19 2018, 6:24 PM

Needs estimation and analysis.

Jdlrobson moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.Jun 19 2018, 6:30 PM

In T197718#4300597, @Jdlrobson wrote:

Needs estimation and analysis.

Whoops, inherited that from the parent task.

Looks ready for estimation to me but let's see what happens

Jdlrobson mentioned this in T197491: Implement new design for moved paragraphs in diffs on mobile.Jun 19 2018, 11:25 PM

Jdlrobson renamed this task from Build sticky header navigation to Build sticky header navigation in beta.Jun 20 2018, 4:11 PM

Jdlrobson updated the task description. (Show Details)

ovasileva updated the task description. (Show Details)Jun 20 2018, 4:16 PM

ovasileva set the point value for this task to 5.Jun 20 2018, 4:20 PM

Jdlrobson updated the task description. (Show Details)Jun 20 2018, 4:22 PM

I just tried adding this to my common.css to get a sense of some initial obstacles.

h2 {
position: -webkit-sticky !important;
position: sticky !important;
top: -1px !important;
background: white !important;
}

At first you'll see that the sticky headings overlap each other as they fix in place while you scroll. One fix for this is to wrap the h2s and their respective following divs (e.g. div.mf-section-1) in a div. I did this by hand to test it out, and you can see it working here:

sticky-headers-real-demo.mov1 MBDownload

• alexhollender_WMF added a comment.Jun 25 2018, 2:08 PM

This comment was removed by • alexhollender_WMF.

ovasileva moved this task from Triaged but Future to Upcoming on the Web-Team-Backlog board.Jun 26 2018, 10:30 AM

• Vvjjkkii renamed this task from Build sticky header navigation in beta to 5maaaaaaaa.Jul 1 2018, 1:03 AM

• Vvjjkkii raised the priority of this task from Medium to High.

• Vvjjkkii added projects: CheckUser, Connected-Open-Heritage-Batch-uploads (RAÄ-KMB_1_2017-02), Tamil-Sites, Gamepress, Hashtags, Jade, KartoEditor, Language-2018-Apr-June, New-Editor-Experiences, Mail, TCB-Team (now WMDE-TechWish).

• Vvjjkkii updated the task description. (Show Details)

• Vvjjkkii removed the point value for this task.

• Vvjjkkii removed a subscriber: Aklapper.

CommunityTechBot renamed this task from 5maaaaaaaa to Build sticky header navigation in beta.Jul 2 2018, 11:43 AM

CommunityTechBot lowered the priority of this task from High to Medium.

CommunityTechBot set the point value for this task to 5.

CommunityTechBot updated the task description. (Show Details)

CommunityTechBot removed projects: TCB-Team (now WMDE-TechWish), Mail, New-Editor-Experiences, Language-2018-Apr-June, KartoEditor, Jade, Hashtags, Gamepress, Tamil-Sites, Connected-Open-Heritage-Batch-uploads (RAÄ-KMB_1_2017-02), CheckUser.

CommunityTechBot added a subscriber: Aklapper.

ovasileva moved this task from Upcoming to Needs Prioritization on the Web-Team-Backlog board.Jul 4 2018, 10:53 AM

@ovasileva what needs analysis? Was there a question in prioritisation yesterday that I missed?

Apparently instrumentation. Got it!
Yes. If instrumentation is necessary we'll want to work out what that looks like before building this.

Since this task is clear, I'm moving to triaged but future. I've created T199157 to go through the analysis. This is stalled on that happening.

• Tbayer subscribed.Jul 10 2018, 5:05 PM

• Niedzielski updated the task description. (Show Details)Jul 26 2018, 6:17 PM

Jdlrobson mentioned this in T147026: [Design, needs analysis] Provide control to change current section heading (Table of contents does not appear in Minerva at mobile resolution).Nov 2 2018, 3:26 PM

Jdlrobson mentioned this in T212732: Make a 'jump to bottom' button.Jan 2 2019, 5:28 PM

• alexhollender_WMF mentioned this in T151115: [EPIC] Improve in-article navigation.Apr 5 2019, 3:53 PM

ovasileva changed the status of subtask T199157: [Spike ??hrs] Sticky header instrumentation from Open to Stalled.May 3 2019, 4:58 PM

• alexhollender_WMF mentioned this in T187804: Jump to top is purposely hidden on iPhone.May 22 2019, 1:53 AM

Will cause confusion since this relates to mobile not desktop improvements.

Build sticky header navigation in betaClosed, DeclinedPublic5 Estimated Story PointsActions