Further changes to tables of contents - #13766
Conversation
|
Size Change: +130 B (+0.01%) Total Size: 974 kB
ℹ️ View Unchanged
|
b1e2293 to
118096e
Compare
|
Hello 👋! When you're ready to run Chromatic, please apply the You will need to reapply the label each time you want to run Chromatic. |
118096e to
0cbc725
Compare
0cbc725 to
3d79d4e
Compare
|
|
||
| const observer = new IntersectionObserver( | ||
| ([e]) => { | ||
| // Automatically collapse the ToC when it becomes sticky (i.e. when it reaches the top of the viewport) |
There was a problem hiding this comment.
Could we also add a comment that explains how the 1px trick and why we use boundingClientRect a bit more? Perhaps a link to the article that explains how this 'trick' works?
https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/
There was a problem hiding this comment.
I've updated the comments
| const tocElement = document.querySelector( | ||
| '[data-component="table-of-contents"]', | ||
| ) as HTMLElement; |
There was a problem hiding this comment.
Is it not possible to use a ref here?
There was a problem hiding this comment.
Good shout, I've made that change
3d79d4e to
1a02945
Compare
1a02945 to
e47fd18
Compare
|
Seen on PROD (merged by @simonbyford 10 minutes and 3 seconds ago) Please check your changes! |
What does this change?
Makes two changes to the behaviour of the ToC (Table of Contents) component:
For 2) I went with the approach detailed here:
https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/
There might be a less hacky way though?
Why?
Following on from #12895 and #13743 we got some feedback from Rich:
Screenshots
Before
sticky-before.mp4
After
sticky-after.mp4