Sticky SectionSCSS Location: /styles/scss/partial/_sticky-section.scss
- Status: Design
- Status: Development
- Status: Documentation
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.
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
Can be used on pages with flexible content sections.