Section

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 Heading Section

  1. A flexible Content container wherein the headline will stick to the top of the content container when scrolling.
  2. Headlines will only become sticky when scrolling if the content within it exceeds 600px in height.
  3. Headlines will scroll out of view when the bottom of the parent container has scrolled past.
  4. The content container can contain many kind of flexible content, including:
    • Rich Text Editor
    • Stats
    • Video Embed
    • Image Gallery
    • Styled List

Sticky Filter Section

  1. Sticky Filter Sections contain the filters for various Resources types, including Insights, Customer Stories, Blog, and Events Landing pages.
  2. At mobile viewport widths, the filters in the sticky filter section will not be sticky but will stack vertically.
  3. Can be used on pages with filterable lists.

Sticky Social Share Section

  1. 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.
  2. Add the classes .social__container--vertical social__container--sticky to the .social__container.

Usage

Can be used on pages with flexible content sections.

Sticky Heading

Lorem ipsum dolor sit amet, graece deleniti disputationi sed id, etiam soluta omnesque an nec, docendi inimicus consectetuer an qui. Eu nec epicurei perpetua dissentiunt, ius ut oblique malorum repudiare. Mel nulla ullamcorper te, aeque ludus temporibus sea cu. Sit no ubique malorum, sit unum dicta doming id. Cu sit hinc verterem elaboraret.

947
Employees
10,000+
Clients Worldwide
35
Years of Experience

Lorem ipsum dolor sit amet, graece deleniti disputationi sed id, etiam soluta omnesque an nec, docendi inimicus consectetuer an qui. Eu nec epicurei perpetua dissentiunt, ius ut oblique malorum repudiare. Mel nulla ullamcorper te, aeque ludus temporibus sea cu. Sit no ubique malorum, sit unum dicta doming id. Cu sit hinc verterem elaboraret.

Maybe a Media Object container while we're at it?

Consumer use tax can be complicated, with various scenarios triggering a requirement for the tax. Vertex Cloud calculates and reports consumer use tax, including for accruals, asset, and goods management, inventory removal, and purchase orders.

Standard Video

With pop-up modal

Watch Demo

At doming suscipit urbanitas nec, illud consulatu in pro. Nec ut ipsum blandit adipisci, ea duo facer solet iuvaret, ne summo nihil dolor qui. Legere inermis mea eu, an nisl delicata perpetua nam, eius tation petentium per an. Te meis error consetetur vix, an scribentur philosophia eos, cu omnes putent graecis eam. Eius iudicabit an vel, nisl inermis pertinacia ad qui. Eum odio tacimates neglegentur ad, ei his movet tempor everti. Suscipit forensibus persequeris quo et, has in nonumy nullam admodum.

Not Sticky

Lorem ipsum dolor sit amet, graece deleniti disputationi sed id, etiam soluta omnesque an nec, docendi inimicus consectetuer an qui.

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.