Text with sticky Heading

Section Template

Overview

A section template showcasing using sticky positioning for the heading. The heading follows the text if you scroll the page up or down. You can also see this effect on various pages and blog posts on this website. For devices with smaller screens it's displayed "normally" in one column with the heading above the text.

Used Elements

See it in action (Scroll to see the effect)

01
A nice heading for this paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet luctus venenatis lectus magna fringilla urna porttitor. Id faucibus nisl tincidunt eget nullam non. Adipiscing enim eu turpis egestas pretium. Enim lobortis scelerisque fermentum dui faucibus in. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus.

Et sollicitudin ac orci phasellus egestas tellus rutrum. Gravida quis blandit turpis cursus in hac habitasse platea. Auctor eu augue ut lectus arcu bibendum at. Dignissim enim sit amet venenatis urna cursus eget nunc. Sed arcu non odio euismod lacinia at quis risus. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Donec et odio pellentesque diam volutpat.

Euismod quis viverra nibh cras. Ut faucibus pulvinar elementum integer enim. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Duis at tellus at urna condimentum mattis pellentesque id nibh. Leo integer malesuada nunc vel risus. Porttitor rhoncus dolor purus non enim praesent elementum facilisis leo. Urna cursus eget nunc scelerisque. Consectetur a erat nam at lectus urna duis convallis convallis.

02
Another great sticky heading

Arcu cursus euismod quis viverra. Purus gravida quis blandit turpis cursus in hac habitasse. Purus in mollis nunc sed id semper risus in. Adipiscing elit duis tristique sollicitudin nibh sit amet. Fermentum leo vel orci porta non pulvinar neque. Sed augue lacus viverra vitae congue eu consequat. Volutpat sed cras ornare arcu dui vivamus arcu. Urna porttitor rhoncus dolor purus non enim.

Et sollicitudin ac orci phasellus egestas tellus rutrum. Gravida quis blandit turpis cursus in hac habitasse platea. Auctor eu augue ut lectus arcu bibendum at. Dignissim enim sit amet venenatis urna cursus eget nunc. Sed arcu non odio euismod lacinia at quis risus. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Donec et odio pellentesque diam volutpat.

Euismod quis viverra nibh cras. Ut faucibus pulvinar elementum integer enim. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Duis at tellus at urna condimentum mattis pellentesque id nibh. Leo integer malesuada nunc vel risus. Porttitor rhoncus dolor purus non enim praesent elementum facilisis leo. Urna cursus eget nunc scelerisque. Consectetur a erat nam at lectus urna duis convallis convallis.

Style / CSS Selectors

Check the Grid and Formatted Text documentation for details on how to configure the elements.

Was this article helpful?