点击列表项切换文本显隐，解决粘性头部遮挡问题

用CSS的:target做内容切换时，原生锚点定位经常会被顶部的sticky/fixed header挡住，得手动滚动才能看到完整内容，用JavaScript可以彻底解决这个问题，而且比纯CSS更灵活。

1. 核心思路 #

放弃原生锚点的自动滚动逻辑，通过JavaScript手动控制：

• 监听按钮点击事件，阻止默认锚点跳转
• 手动切换对应内容区块的显示/隐藏状态
• 计算目标内容的滚动位置，避开header高度，实现精准定位

2. 具体实现代码 #

HTML结构 #

<!-- Sticky头部 -->
<header class="sticky-header">顶部固定导航</header>

<!-- 切换按钮列表 -->
<ul class="tab-list">
  <li><a href="#content1" class="tab-btn">内容1</a></li>
  <li><a href="#content2" class="tab-btn">内容2</a></li>
  <li><a href="#content3" class="tab-btn">内容3</a></li>
</ul>

<!-- 内容区块 -->
<div class="content-block" id="content1">内容1的详细展示区域...</div>
<div class="content-block" id="content2">内容2的详细展示区域...</div>
<div class="content-block" id="content3">内容3的详细展示区域...</div>

基础CSS #

.sticky-header {
  position: sticky;
  top: 0;
  height: 60px; /* 根据实际头部高度调整 */
  background: #fff;
  border-bottom: 1px solid #eee;
  z-index: 100;
}

.tab-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 15px;
  margin: 20px 0;
}

.content-block {
  display: none;
  margin-top: 20px;
  padding: 25px;
  border: 1px solid #eee;
}

/* 保留:target兼容，避免JS失效时的基础功能 */
.content-block:target {
  display: block;
}

JavaScript逻辑 #

// 获取头部高度（根据实际类名调整）
const headerHeight = document.querySelector('.sticky-header').offsetHeight;
// 获取所有切换按钮和内容区块
const tabBtns = document.querySelectorAll('.tab-btn');
const contentBlocks = document.querySelectorAll('.content-block');

// 绑定按钮点击事件
tabBtns.forEach(btn => {
  btn.addEventListener('click', function(e) {
    // 阻止原生锚点跳转
    e.preventDefault();
    // 提取目标内容ID
    const targetId = this.getAttribute('href').slice(1);
    const targetBlock = document.getElementById(targetId);

    // 隐藏所有内容区块
    contentBlocks.forEach(block => block.style.display = 'none');
    // 显示目标内容
    targetBlock.style.display = 'block';

    // 计算滚动位置：目标区块顶部 - 头部高度 - 10px额外间距
    const scrollPosition = targetBlock.offsetTop - headerHeight - 10;
    // 平滑滚动到目标位置
    window.scrollTo({
      top: scrollPosition,
      behavior: 'smooth'
    });

    // 更新URL hash，保留浏览器前进后退功能
    window.history.pushState(null, null, `#${targetId}`);
  });
});

// 处理页面加载时的hash（比如直接访问带#的URL）
window.addEventListener('load', () => {
  const currentHash = window.location.hash.slice(1);
  if (currentHash) {
    const targetBlock = document.getElementById(currentHash);
    if (targetBlock) {
      contentBlocks.forEach(block => block.style.display = 'none');
      targetBlock.style.display = 'block';
      const scrollPosition = targetBlock.offsetTop - headerHeight - 10;
      window.scrollTo({ top: scrollPosition });
    }
  }
});

3. 方案优势 #

• 彻底解决锚点被header遮挡的问题，滚动位置精准可控
• 支持平滑滚动，提升用户体验
• 保留URL hash更新，不破坏浏览器的前进后退逻辑
• 扩展性强，后续可轻松添加按钮高亮、内容切换动画等功能

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