Sticky Tabs NavigationSCSS Location: /styles/scss/partial/_tabs.scss
- Status: Design
- Status: Development
- Status: Documentation
A section comprised of a Sticky Tabs component which updates its active tab as the user scrolls through associated content sections.
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.
.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
Each sticky tab must be given an
href attribute that matches the ID of its corresponding content section.