Section

Sticky Tabs Navigation

SCSS Location: /styles/scss/partial/_tabs.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

Description

A section comprised of a Sticky Tabs component which updates its active tab as the user scrolls through associated content sections.

Guidelines

The Sticky Tabs will remain fixed to the top of the viewport while the user scrolls within the associated content sections.

A sticky tab displays as active when at least 75% of its associated content section is visible in the viewport.

Usage

The .tabs--sticky element must be given an attribute of data-sticky="tabs" to trigger sticky behavior.

Content sections that correspond to sticky tabs must be consecutive siblings in the markup.

Each content section that corresponds to a sticky tab must be identified by a unique ID and an attribute of data-tab-sticky="section".

Each sticky tab must be given an href attribute that matches the ID of its corresponding content section.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Image Alt Text

Lorem Ipsum Dolor Sit Amet

Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum.

Example Link Text

Section One

Alt Text

Courses

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet. Proin elementum feugiat augue, in sodales enim tempus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Alt Text

Vertex Certified Program

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet. Proin elementum feugiat augue, in sodales enim tempus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Alt Text

Courses

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet. Proin elementum feugiat augue, in sodales enim tempus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Section Two

Alt Text

Courses

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet. Proin elementum feugiat augue, in sodales enim tempus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Alt Text

Vertex Certified Program

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet. Proin elementum feugiat augue, in sodales enim tempus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Alt Text

Courses

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet. Proin elementum feugiat augue, in sodales enim tempus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Sed Do Eiusmod Tempor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem Ipsum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Section Three

Section subheading lorem ipsum dolor sit amet.

Alt Text

Courses

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet. Proin elementum feugiat augue, in sodales enim tempus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem Ipsum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Section Four

Section subheading lorem ipsum dolor sit amet.

Alt Text

Courses

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet. Proin elementum feugiat augue, in sodales enim tempus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Alt Text

Vertex Certified Program

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet. Proin elementum feugiat augue, in sodales enim tempus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Alt Text

Courses

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet. Proin elementum feugiat augue, in sodales enim tempus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Alt Text

Vertex Certified Program

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet. Proin elementum feugiat augue, in sodales enim tempus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Alt Text

Courses

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet. Proin elementum feugiat augue, in sodales enim tempus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Alt Text

Vertex Certified Program

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet. Proin elementum feugiat augue, in sodales enim tempus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Alt Text

Courses

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet. Proin elementum feugiat augue, in sodales enim tempus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Section Five

Section subheading lorem ipsum dolor sit amet.

Alt Text

Courses

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet. Proin elementum feugiat augue, in sodales enim tempus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Alt Text

Courses

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet. Proin elementum feugiat augue, in sodales enim tempus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Wysiwyg Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem Ipsum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.