Scroll down! The horizontal bars on this page are "sticky" and won't scroll out of view.
Every "stickybar" will smoothly dock to its predecessor when scrolling down. Customize this with buttons above!

Sticky Bar

The header above is an H1 element and has some default margin-top and margin-bottom in most browsers.
The JavaScript working here recognizes and honors that.

Simply set CSS class="stickybar" to the element,
then it will stick to the top of the window when scrolling down.

Even the following table-of-contents to the left is sticky.
The elements dock to each other in HTML element order. Thus an aside to the right would not work as expected.
Try out the nested sticky bar in the scrollable list below!

[1. Ovid]

[2. Vergil]

[3. Horaz]

Sticky Poets

[4. Cicero]

[5. Titus]

[6. Tiberius]

[7. Flavius]

[8. Ovid]

[9. Vergil]

[10. Horaz]

[11. Cicero]

[12. Titus]

[13. Tiberius]

[14. Flavius]

Metamorphoses (Ovid)

Aurea prima sata est aetas, quae vindice nullo,

sponte sua, sine lege fidem rectumque colebat.

Poena metusque aberant nec verba minantia fixo

aere legebantur, nec supplex turba timebat

iudicis ora sui, sed erant sine vindice tuti.

Nondum caesa suis, peregrinum ut viseret orbem,

montibus in liquidas pinus descenderat undas,

nullaque mortales praeter sua litora norant.

Nondum praecipites cingebant oppida fossae,

non tuba directi, non aeris cornua flexi,

non galeae, non ensis erant: sine militis usu

mollia securae peragebant otia gentes.

.....