[feature] Dynamic Active Tab Indicator with Scroll-Based Updates

[HIHJH]

✅Feature Request

Motivation

Having an indicator on the tab bar to show which view the user is currently on would improve the user experience by providing clear navigation feedback. This feature is especially useful when users are scrolling through content, as it allows them to easily identify their active view at a glance. It aligns with usability best practices, similar to platforms like Velog.

Proposed Solution

Implement an indicator on the tab bar that highlights the active view. This can be achieved by adding a visual cue, such as a color change, underline, or bold text, to the tab bar item corresponding to the active view. Additionally, the tab should update based on the user's scroll position, dynamically highlighting the section they are viewing without needing to click the tab.

Expected Behavior

The tab bar should visually indicate the active view by displaying a unique style (e.g., color change, underline, bold text) for the active tab. The active state should dynamically update as the user scrolls through different sections of the page. Users should be able to recognize their position on the page via the tab bar, improving navigation and reducing potential confusion.

Code Example

Below is an example implementation using React. This version includes both click-based navigation and scroll-based updates to the tab's active state:

import React, { useState, useEffect } from 'react';

const TabBar = () => {
  const [activeTab, setActiveTab] = useState('Home');

  useEffect(() => {
    const handleScroll = () => {
      const scrollPosition = window.scrollY;

      // Update the active tab based on scroll position
      if (scrollPosition < 600) {
        setActiveTab('Home');
      } else if (scrollPosition >= 600 && scrollPosition < 1200) {
        setActiveTab('Search');
      } else if (scrollPosition >= 1200) {
        setActiveTab('Profile');
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const tabs = ['Home', 'Search', 'Profile'];

  return (
    <div style={styles.tabContainer}>
      {tabs.map((tab) => (
        <button
          key={tab}
          onClick={() => {
            document.getElementById(tab).scrollIntoView({ behavior: 'smooth' });
          }}
          style={{
            ...styles.tabItem,
            ...(activeTab === tab ? styles.activeTabItem : {}),
          }}
        >
          {tab}
        </button>
      ))}
    </div>
  );
};

const styles = {
  tabContainer: {
    display: 'flex',
    justifyContent: 'space-around',
    padding: '10px',
    backgroundColor: '#f8f9fa',
    position: 'fixed',
    width: '100%',
    top: 0,
    zIndex: 1000,
  },
  tabItem: {
    padding: '10px 20px',
    cursor: 'pointer',
    fontWeight: 'bold',
    color: '#666',
    border: 'none',
    background: 'none',
    outline: 'none',
  },
  activeTabItem: {
    color: '#007bff',
    borderBottom: '2px solid #007bff',
  },
};

export default TabBar;

+ Sections for Scroll Detection

The following example layout works with the code above, creating sections for each tab that can be navigated to by either scrolling or clicking on the tabs:

import React from 'react';
import TabBar from './TabBar';

const App = () => {
  return (
    <div>
      <TabBar />
      <div id="Home" style={{ height: '600px', backgroundColor: '#f0f8ff' }}>
        <h2>Home Section</h2>
      </div>
      <div id="Search" style={{ height: '600px', backgroundColor: '#e6f7ff' }}>
        <h2>Search Section</h2>
      </div>
      <div id="Profile" style={{ height: '600px', backgroundColor: '#cceeff' }}>
        <h2>Profile Section</h2>
      </div>
    </div>
  );
};

export default App;

Example UI

	Before	After
Tab Indicator	No indication of active view on the tab bar	Active tab is highlighted with a color change or underline

ETC

This feature allows users to identify their active view both through click-based navigation and automatic updates as they scroll through the content, providing a seamless and intuitive user experience.