FIXED STICKY POLYFILL DEMO: Address book scenario

Back to github

In this example, the headings in a stack of DIVs stick to the top of the screen as you scroll the page, only to disappear as you reach the next section.

A

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce erat metus, tincidunt eu ultrices sit amet, cursus quis ipsum. Aliquam maximus vulputate neque quis semper. Quisque placerat nec sapien et malesuada. Quisque vel justo nec arcu maximus imperdiet at nec augue. Donec luctus iaculis finibus. Vivamus eu augue id massa pellentesque consequat vel ut ante. Curabitur venenatis, arcu at pharetra feugiat, diam leo imperdiet turpis, vel convallis ipsum erat sed lorem. Nullam rutrum neque eros, a dignissim purus dapibus a. Nunc feugiat, nulla sit amet suscipit tempus, tortor leo tempus nisl, quis fringilla ex est ut nibh. Etiam egestas neque sit amet lectus vulputate consequat. Donec tincidunt ante vitae eros sodales pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vel ipsum eget lectus vehicula sodales non ut sem. Curabitur iaculis mollis est, sit amet eleifend ante faucibus eget. Maecenas non odio orci.

B

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce erat metus, tincidunt eu ultrices sit amet, cursus quis ipsum. Aliquam maximus vulputate neque quis semper. Quisque placerat nec sapien et malesuada. Quisque vel justo nec arcu maximus imperdiet at nec augue. Donec luctus iaculis finibus. Vivamus eu augue id massa pellentesque consequat vel ut ante. Curabitur venenatis, arcu at pharetra feugiat, diam leo imperdiet turpis, vel convallis ipsum erat sed lorem. Nullam rutrum neque eros, a dignissim purus dapibus a. Nunc feugiat, nulla sit amet suscipit tempus, tortor leo tempus nisl, quis fringilla ex est ut nibh. Etiam egestas neque sit amet lectus vulputate consequat. Donec tincidunt ante vitae eros sodales pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vel ipsum eget lectus vehicula sodales non ut sem. Curabitur iaculis mollis est, sit amet eleifend ante faucibus eget. Maecenas non odio orci.

C

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce erat metus, tincidunt eu ultrices sit amet, cursus quis ipsum. Aliquam maximus vulputate neque quis semper. Quisque placerat nec sapien et malesuada. Quisque vel justo nec arcu maximus imperdiet at nec augue. Donec luctus iaculis finibus. Vivamus eu augue id massa pellentesque consequat vel ut ante. Curabitur venenatis, arcu at pharetra feugiat, diam leo imperdiet turpis, vel convallis ipsum erat sed lorem. Nullam rutrum neque eros, a dignissim purus dapibus a. Nunc feugiat, nulla sit amet suscipit tempus, tortor leo tempus nisl, quis fringilla ex est ut nibh. Etiam egestas neque sit amet lectus vulputate consequat. Donec tincidunt ante vitae eros sodales pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vel ipsum eget lectus vehicula sodales non ut sem. Curabitur iaculis mollis est, sit amet eleifend ante faucibus eget. Maecenas non odio orci.