Sticky Section
SCSS Location: /styles/scss/partial/_sticky-section.scss- Status: Design
- Status: Development
- Status: Documentation
Description
Sticky Sections are sections of content where a certain element or container of elements will become sticky when the page is scrolled.
The Sticky container will scroll out of view when the bottom of the parent container has scrolled past.
Sticky Sections require a specific structure in order to function properly. There must be an outer container that is position: relative. Inside this should be an absolutely positioned inner container that will be 100% of the height of the tallest element within it. Inside this inner container is the sticky item which will become sticky according to settings for that sticky container.
The sticky functionality will apply only at 768px viewport-width and wider.
Guidelines
Sticky Social Share Section
- The Social Share Component can be adapted for use in a Sticky Section by adding a containing element,
.social__outer-containerwhich is absolutely positioned, inside a relatively positioned container. - Add the classes
.social__container--vertical social__container--stickyto the.social__container.
Usage
Can be used on pages with flexible content sections.
PAGE CONTENT Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultricies leo integer malesuada nunc vel risus commodo. Vitae elementum curabitur vitae nunc. Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Ut aliquam purus sit amet luctus venenatis lectus magna fringilla. Semper viverra nam libero justo laoreet. Nisl tincidunt eget nullam non nisi est. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Enim diam vulputate ut pharetra sit. Morbi quis commodo odio aenean. Mus mauris vitae ultricies leo integer malesuada nunc vel. Nibh nisl condimentum id venenatis a condimentum vitae sapien. Diam donec adipiscing tristique risus nec. Nisl purus in mollis nunc sed id semper risus in. Dui ut ornare lectus sit. Accumsan in nisl nisi scelerisque eu.
Tempor id eu nisl nunc mi. Ut tellus elementum sagittis vitae. Enim facilisis gravida neque convallis a. Augue lacus viverra vitae congue eu consequat ac felis. Vel fringilla est ullamcorper eget nulla. Urna id volutpat lacus laoreet non. Proin fermentum leo vel orci porta non pulvinar. Fermentum dui faucibus in ornare quam viverra orci sagittis. Facilisis sed odio morbi quis. Egestas diam in arcu cursus euismod quis viverra nibh.
Mauris pharetra et ultrices neque ornare aenean euismod elementum. Sed tempus urna et pharetra pharetra massa massa ultricies mi. Sit amet nisl purus in mollis. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Aliquam faucibus purus in massa tempor nec feugiat nisl. Ac orci phasellus egestas tellus rutrum tellus pellentesque. Ligula ullamcorper malesuada proin libero. Sollicitudin aliquam ultrices sagittis orci a. Mi bibendum neque egestas congue quisque. Phasellus vestibulum lorem sed risus. Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus. Consectetur a erat nam at lectus. Vel orci porta non pulvinar. Ornare lectus sit amet est placerat in egestas erat. Felis imperdiet proin fermentum leo vel orci porta non pulvinar. Elit ullamcorper dignissim cras tincidunt lobortis feugiat.
