如何用HTML、CSS、JS实现点击文本等宽下划线及sticky bar样式设置

一、完整可运行代码 #

直接复制即可测试效果，后续再拆解核心细节：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Nav with Underline</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* 粘性导航栏核心样式 */
    .sticky-bar {
      position: sticky;
      top: 0;
      z-index: 100;
      background: linear-gradient(90deg, #2d3748, #4a5568);
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      padding: 1.2rem 0;
    }

    .nav-list {
      list-style: none;
      display: flex;
      gap: 2.5rem;
      justify-content: center;
    }

    .nav-item a {
      text-decoration: none;
      color: #f7fafc;
      font-size: 1.15rem;
      font-weight: 500;
      position: relative;
    }

    /* 导航项下划线 */
    .nav-item a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -5px;
      width: 100%;
      height: 2px;
      background-color: #ed8936;
      transform: scaleX(0);
      transition: transform 0.25s ease-in-out;
    }

    .nav-item.active a::after {
      transform: scaleX(1);
    }

    /* 联系人文本样式 */
    .contact-section {
      padding: 3rem;
      text-align: center;
    }

    .contact-text {
      font-size: 1.2rem;
      margin-bottom: 1rem;
    }

    .clickable-text {
      cursor: pointer;
      margin: 0 1rem;
      position: relative;
      color: #2b6cb0;
    }

    .clickable-text::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -3px;
      width: 100%;
      height: 2px;
      background-color: #2b6cb0;
      transform: scaleX(0);
      transition: transform 0.25s ease-in-out;
    }

    .clickable-text.active::after {
      transform: scaleX(1);
    }

    /* 占位内容，测试粘性效果 */
    .placeholder-content {
      height: 1200px;
      background-color: #f7fafc;
    }
  </style>
</head>
<body>
  <nav class="sticky-bar">
    <ul class="nav-list">
      <li class="nav-item active"><a href="#home">HOME</a></li>
      <li class="nav-item"><a href="#about">ABOUT</a></li>
      <li class="nav-item"><a href="#contact">CONTACT ME</a></li>
    </ul>
  </nav>

  <div class="contact-section">
    <div class="contact-text">
      <span class="clickable-text active">在线客服</span>
      <span class="clickable-text">邮箱：support@example.com</span>
      <span class="clickable-text">电话：123-456-7890</span>
    </div>
  </div>

  <div class="placeholder-content"></div>

  <script>
    // 导航项点击切换下划线
    const navItems = document.querySelectorAll('.nav-item');
    navItems.forEach(item => {
      item.addEventListener('click', () => {
        navItems.forEach(nav => nav.classList.remove('active'));
        item.classList.add('active');
      });
    });

    // 联系人文本点击切换下划线
    const clickableTexts = document.querySelectorAll('.clickable-text');
    clickableTexts.forEach(text => {
      text.addEventListener('click', () => {
        clickableTexts.forEach(t => t.classList.remove('active'));
        text.classList.add('active');
      });
    });
  </script>
</body>
</html>

二、核心细节拆解 #

1. 粘性导航栏实现

• 粘性定位：position: sticky + top: 0 让导航栏滚动到顶部时固定，z-index: 100 确保不会被页面内容覆盖。
• 渐变背景：linear-gradient(90deg, #2d3748, #4a5568) 可直接修改颜色值，调整渐变方向和配色。
• 阴影效果：box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1)，参数分别是垂直偏移、模糊半径、阴影透明度，按需调整即可。

2. 等宽下划线实现

• 伪元素构建下划线：用::after伪元素生成下划线，width: 100% 保证和文本宽度完全匹配，height: 2px 满足需求。
• 显示/隐藏逻辑：默认通过transform: scaleX(0)隐藏下划线，点击后给父元素添加active类，触发transform: scaleX(1)显示，配合transition实现平滑过渡动画。
• 复用性：导航项和联系人文本的下划线逻辑完全一致，只需复用类名和JS处理逻辑即可快速扩展。

三、自定义调整建议 #

• 渐变背景：换成linear-gradient(135deg, #667eea 0%, #764ba2 100%)这类主题色渐变。
• 下划线颜色：修改background-color的值，匹配网站主色调。
• 动画速度：调整transition里的时间值，0.2s更快，0.4s更平缓。

内容的提问来源于stack exchange，提问作者Htut Khaung