Jekyll站点目录跳转标题被头部导航遮挡问题求助

问题描述 #

我的Jekyll站点会自动生成目录（ToC），点击目录项跳转至对应标题时，标题会被固定的site-header/site-nav遮挡：

• 点击目录高亮「Usage」时，页面中看不到「Usage」标题
• 向上滚动露出标题后，目录会自动高亮其他项
• 移除site-header后可确认标题被导航栏完全覆盖

期望效果：点击目录项时，对应标题直接显示在内容区域，同时目录项保持高亮。

解决方案 #

方法1：全局设置滚动内边距（推荐） #

给页面滚动容器设置scroll-padding-top，值等于site-header的高度，让锚点跳转时自动留出顶部空间：

html {
  scroll-padding-top: 80px; /* 替换为你的site-header实际高度 */
}

注意：需确保site-header的高度是固定值，若为动态高度可通过JS获取后设置。

方法2：给标题添加偏移锚点 #

给所有带锚点ID的标题添加隐藏伪元素，将锚点目标位置上移：

/* 适配所有生成锚点的标题标签 */
h2[id], h3[id], h4[id] {
  position: relative;
}

h2[id]::before, h3[id]::before, h4[id]::before {
  content: "";
  display: block;
  height: 80px; /* 与header高度一致 */
  margin-top: -80px; /* 负边距抵消高度，不影响布局 */
  visibility: hidden;
}

该方法不会影响全局滚动行为，适合仅需调整锚点位置的场景。

方法3：JavaScript手动控制跳转位置 #

若header高度动态变化，可通过JS监听目录点击事件，手动计算滚动位置：

// 绑定目录所有链接的点击事件
document.querySelectorAll('.toc a').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const targetId = this.getAttribute('href').slice(1);
    const targetEl = document.getElementById(targetId);
    if (!targetEl) return;

    // 获取header高度并计算目标滚动位置
    const headerHeight = document.querySelector('.site-header').offsetHeight;
    const targetTop = targetEl.offsetTop - headerHeight;

    // 执行滚动并设置目录高亮
    window.scrollTo({ top: targetTop, behavior: 'smooth' });
    document.querySelectorAll('.toc .active').forEach(item => item.classList.remove('active'));
    this.closest('li').classList.add('active');
  });
});

使用时需确保原有目录高亮的滚动监听逻辑与该代码兼容。

验证步骤 #

1. 确认site-header的定位属性为fixed或sticky（这是遮挡的核心原因）
2. 精确测量header的高度（含内边距、边框），保证设置的偏移值准确
3. 测试不同屏幕尺寸下的跳转效果，避免响应式布局导致的高度偏差

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