Sticky & Scroll-Based Tabs

Keep your tab navigation in view and in sync with content as users scroll. When enabled, the tab buttons stick to the top of their container, and the active tab highlights automatically based on the visible content section.

Who Should Use This

• Long-form Content: FAQs, tutorials, or documentation with multiple sections.
• Step-by-Step Guides: Keeps track of progress as readers scroll.
• Feature Overviews: Ensures users always see which feature they’re reading about.

Prerequisites

• Easy Tabs Block Pro activated
• A Tabs block with at least two tab buttons and corresponding content panels

Enabling Sticky & Scroll-Based Tabs

1. Select Your Tabs Block
   In the Gutenberg editor, click on the Tabs block to reveal its settings.
2. Open the “Sticky with Scrollable” Panel
   In the block inspector sidebar, locate and expand Sticky with Scrollable.
3. Toggle On
   Switch Enable Sticky with Scrollable to On. <Placeholder Image: Sticky with Scrollable panel in the inspector>

Panel Settings

• Sticky Parent Element Height
  Minimum height of the tabs container to trigger sticky behavior. Must be at least 200 vh.
  Example: 300 vh
• Sticky Element Height
  Height of the sticky tab buttons wrapper. Adjust to match your button styling and padding.
  Example: 80 vh
• Sticky Element Top Offset
  Distance from the top of the viewport before the tabs stick. Handy for avoiding overlap with fixed headers or admin bars.
  Example: 60 px

Tip: If you have an admin bar or fixed header, set Top Offset equal to its height.

How It Works

1. Sticky Activation
   When you scroll past the top of the tab buttons wrapper, it becomes fixed at your Top Offset.
2. Scroll Tracking
   As each content panel scrolls into view, its corresponding tab button gains the active state.
3. Responsive Behavior
   • On narrow screens, tab buttons remain horizontally scrollable.
   • If overflow isn’t needed, they wrap to multiple lines.

Best Practices

• Keep Sections Clear: Match each tab button to a distinct content panel.
• Anchor Links: Use heading anchors inside content panels if you want deep linking.
• Combine with Collapsible Tabs: For extremely long pages, collapse subsections to reduce scrolling.
• Test Across Devices: Verify sticky behavior on desktop and mobile, adjusting heights and offsets as needed.

Example Use Cases

1. FAQ Page
   Visitors always see the question list and which answer they’re on.
2. Product Features
   Readers never lose track of which feature detail they’re reading.
3. Tutorial Steps
   Keeps the current step highlighted as users scroll through instructions.

Placeholder Image: Sticky & Scroll-Based Tabs in action on a sample page

With Sticky & Scroll-Based Tabs, your readers enjoy seamless navigation and clear context, even on the longest pages.