Sticky Table-of-Contents

This page demonstrates how a left-side table-of-contents could behave beside an article on right side. It stays in view as long as the article is scrolled down, but scrolls upwards when the footer appears. The contained script also works when the elements are in an embedded scroll-pane (click checkbox to try out, and then also resize the scroll-pane or the browser window).

Header: description, description, description, description, description, description , description, description, description, description, description, description , description, description, description, description, description, description , description, description, description, description, description, description , description, description, description, description, description, description , description, description, description, description, description, description ...

Intro 1
One
Two
Three
Four
Five
Six
Seven
Sum

Intro 2
One
Two
Three
Four
Five
Six
Seven
Sum

Intro 3
One
Two
Three
Four
Five
Six
Seven
Sum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida. Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet, porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt. Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.

Another One

This second section shows an article that is shorter than the table-of-contents. Try to make the browser window narrow, so that the article gets longer than the table-of-contents, then you see the effect also on the blue text. This proves that there can be an arbitrary number of TOC / article pairs on the page, and they are all save against embedded scrollbars.

Intro 1
One
Two
Three
Four
Five
Six
Seven
Sum

Intro 2
One
Two
Three
Four
Five
Six
Seven
Sum

Intro 3
One
Two
Three
Four
Five
Six
Seven
Sum

Intro 4
One
Two
Three
Four
Five
Six
Seven
Sum