Implementing a Sticky Tabs Component with Custom Scroll Behavior in React

When developing web or mobile applications, a Tabs component is often needed to switch between different content sections, and a sticky header can improve user experience by keeping navigation visible during scrolling.

The component described includes a top navigation bar that sticks to the viewport, highlights the active tab, and automatically scrolls the page to the corresponding content when a tab is selected.

Sticky effect implementation uses the simple CSS .tab-container { position: sticky; top: 0px; z-index: 9; }, which works on all target devices that support position: sticky.

Tab click handling is achieved with a React onTabClick function that calculates the offset of the target section and calls window.scrollTo({ top: offset, behavior: 'smooth' }). An IntersectionObserver monitors the visibility of each content block to update the active tab dynamically.

import React, { useState, useEffect, useRef } from 'react@18';
import { createRoot } from 'react-dom@18/client';
// ... (full component code omitted for brevity)

Collapsible service description is provided by a TextCollapse component that limits the displayed lines and shows a "Read more" button when the content exceeds the maximum height.

type TextCollapseT = { text: string; maxLines: number; };
const TextCollapse = ({ text, maxLines }: TextCollapseT) => {
  const [expanded, setExpanded] = useState(false);
  // ... (implementation details)
};

The final solution combines the sticky header, smooth scrolling, IntersectionObserver tracking, and collapsible sections into a reusable component that works across the listed compatible devices.

Author Wang Jing from the Frontend Team of Autohome shares the implementation details, code snippets, and compatibility considerations.