Table of content #199
Table of content #199
Conversation
|
Try to scroll this page: https://docs-stage.codex.so/how-to-connect-to-mongo |
|
Let's make the "On this page" heading fixed as well
|
|
Please add some offset above the heading when you scroll to it |
|
Looks like it highlights the top section. I think, it would be better to highlight the section that is currently at the center of the viewport |
This reverts commit 18aad62.
|
Maybe we should hide table of contents on narrow screens? Seems like it is useless when it is at the bottom of the page |
|
it could be used as a quick teleport to headers from the end of the article. actually i don't know do we need to show it on mobile devices. need to ask product owner to make a decision.
|
talyguryn
requested review from
nikmel2803,
TatianaFomina,
robonetphy and
slaveeks
and removed request for
nikmel2803
| * If fixed header is present then calculate scroll position based on it | ||
| */ | ||
| if (this.fixedHeaderSelector) { | ||
| const fixedHeader = document.querySelector(this.fixedHeaderSelector); |
There was a problem hiding this comment.
don't call dom search on every scroll. Do it once before the hadler.
| /** | ||
| * Calculate scroll position | ||
| */ | ||
| let lastKnownScrollPosition = 1 + window.scrollY; |
| const fixedHeader = document.querySelector(this.fixedHeaderSelector); | ||
|
|
||
| if (fixedHeader) { | ||
| lastKnownScrollPosition += fixedHeader.getBoundingClientRect().height; |
There was a problem hiding this comment.
that will fire reflow on every scroll handler. To prevent this, call this method once before the handler since it wont change with scroll.
| calculateBoundings() { | ||
| this.tagsSectionsMap = this.tags.map((tag) => { | ||
| const rect = tag.getBoundingClientRect(); | ||
| const top = rect.top + window.scrollY; |
There was a problem hiding this comment.
you can add the third parameter like "offset" to resolve the problem like that
|
|
If this method resolves your problem, you can use the polyfill for safari |
resolves #176