Table of Contents

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 Caption
Table Heading 1Table Heading 2Table Heading 3Table Heading 4Table Heading 5Table Heading 6Table Heading 7
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5Table Cell 6Table Cell 7
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5Table Cell 6Table Cell 7
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5Table Cell 6Table Cell 7
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5Table Cell 6Table Cell 7
Table Footer 1Table Footer 2Table Footer 3Table Footer 4Table Footer 5Table Footer 6Table Footer 7