Demo 01: Sticky to Hover

What

This is a self-contained demo file, with HTML and CSS, that belongs to my article From sticky links to button hovering.

First, the old solution, until 27 March 2023, when the text and navigation blocks were both marked with position: absolute, and each had its own automatic scroll bar when necessary.

Filler

Here we need some extra text, like a Latin Lorem ipsum, but in English for easier tests of readability. It is a filler so the ‘article’ contains more text than fits on a screen, and scrolling is necessary.

Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine.

Here we need some extra text, like a Latin Lorem ipsum, but in English for easier tests of readability. It is a filler so the ‘article’ contains more text than fits on a screen, and scrolling is necessary.

Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine. Fill, fill, fill, it’s a filler machine.

Here we need some extra text, like a Latin Lorem ipsum, but in English for easier tests of readability. It is a filler so the ‘article’ contains more text than fits on a screen, and scrolling is necessary.

Hereinbelow follow the navigation links.