Sticky

The CSS property position: sticky allows block elements to be displayed either static or fixed depending on the scroll position. The menu of this page is displayed as a sticky menu.

Demo

Scroll the box below to see the effect:

Above the sticky area

As long as the scrollbar is at the top, the area formatted as position: sticky is displayed as postiton: static. Once you scroll down until the sticky area reaches the top edge, it remains “glued” there (position: fixed).

Sticky Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Fusce nec dolor ac nisi dignissim facilisis. Etiam varius viverra maximus. Maecenas eu ligula porttitor, accumsan enim sit amet, accumsan risus. Integer augue augue, fringilla ac commodo et, vulputate a turpis. Praesent lobortis hendrerit dolor, malesuada tincidunt arcu commodo vel. In sit amet scelerisque felis. Aenean vel tincidunt enim, a cursus tortor. Donec non laoreet elit. Proin sagittis nibh nec massa aliquam, et feugiat massa suscipit. Donec mollis dolor massa, ac dignissim nisl ornare ac.

Code

div {
    position: sticky;
    top: 0;
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *