Page MenuHomePhabricator

Build sticky header navigation in beta
Open, Stalled, NormalPublic5 Story Points

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

Event Timeline

ovasileva triaged this task as Normal 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
Jdlrobson added a subscriber: Jdlrobson.

Needs estimation and analysis.

Needs estimation and analysis.

Whoops, inherited that from the parent task.

Jdlrobson updated the task description. (Show Details)Jun 19 2018, 10:21 PM

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

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:

This comment was removed by alexhollender.
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 Normal to High.
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 Normal.
CommunityTechBot set the point value for this task to 5.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added a subscriber: Aklapper.

@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.

Jdlrobson changed the task status from Open to Stalled.Jul 9 2018, 9:11 PM

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.