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!
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.
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!
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.
.....
ɔ⃝ Fritz Ritzberger, 2016-01-04