[wp-trac] [WordPress Trac] #34343: Customizer: Make panel headers sticky?

[WordPress Trac]

#34343: Customizer: Make panel headers sticky?
-------------------------------------+------------------------------
 Reporter:  pavelevap                |       Owner:  delawski
     Type:  enhancement              |      Status:  assigned
 Priority:  normal                   |   Milestone:  Awaiting Review
Component:  Customize                |     Version:  4.3
 Severity:  normal                   |  Resolution:
 Keywords:  needs-patch ux-feedback  |     Focuses:  ui, javascript
-------------------------------------+------------------------------
Changes (by delawski):

 * keywords:  needs-patch => needs-patch ux-feedback
 * focuses:  ui => ui, javascript


Comment:

 Today I've created all the 'mechanics' behind the sticky header feature.

 At the first glance my solution may not seem obvious (i.e. using
 `position: fixed`). I have kept in mind updates that #34391 is going to
 introduce (hopefully in this release). Panels/sections are transitioned
 there using CSS transforms. They create new stacking contexts and paint
 layers, making it really hard to make use of `position: fixed`.

 I still have to find best way to bind header positioning method to
 `scroll` event on the sidebar (`scroll` in current implementation of
 panels/sections is happening on either the sidebar or inner `<ul>`s; this
 will get simplified thanks to #34391).

 Below you can see the actual effect of header toggling. I tried to make it
 as natural as possible, though I'm open to UX feedback.

 [[Image(https://cldup.com/PFnHjlutQV.gif)]]

 (Link to better quality video: https://cldup.com/yOM0Mr7GIO.mov)

--
Ticket URL: <https://core.trac.wordpress.org/ticket/34343#comment:12>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform