HTML Sticky Element
Below you can see headers and a table using CSS sticky positioning only in order to preserve the context of where in the page the user is.
After testing this, I decided to proceed with a JavaScript-based approach where I utilize a dynamic table of contents that lives in the navbar in order to provide page-wide navigation and position feedback.
Header 2
Header 3
Header 3
Header 3
Header 3
Header 4
Header 5
Header 6
Table
The following table was intentionally x-overflowed off the side of the page. When an element has position sticky and any parent of that element hides any of the content by using overflow, it then breaks the sticky behavior. There seems there might be a method to resolve this issue but since I changed course on how to implement page position feedback to end users, this example has become suspended.
Intentionally x-overflowed.
Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 | Table Heading 6 | Table Heading 7 |
---|---|---|---|---|---|---|
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 | Table Cell 6 | Table Cell 7 |
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 | Table Cell 6 | Table Cell 7 |
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 | Table Cell 6 | Table Cell 7 |
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 | Table Cell 6 | Table Cell 7 |
Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 4 | Table Footer 5 | Table Footer 6 | Table Footer 7 |