带sticky属性的分段导航定位异常问题求助

你的问题核心是：默认锚点跳转仅让目标元素顶部对齐视口，但所有sticky区块会堆叠固定在视口内，导致底部跳转时目标被上层sticky元素遮挡。以下是两种可行的解决方法：

方法一：自定义滚动逻辑（推荐） #

通过JavaScript手动控制滚动位置，让页面滚动到目标区块的原始文档位置，此时目标区块会自动成为最上层的sticky元素，其他区块会被滚动出视口。

实现代码（React环境） #

import { useRef } from 'react';

function App() {
  // 自定义滚动函数，替代默认锚点跳转
  const scrollToTarget = (e, targetId) => {
    e.preventDefault(); // 阻止默认跳转行为
    const targetElement = document.getElementById(targetId);
    if (!targetElement) return;

    // 滚动到目标元素在文档中的原始位置，开启平滑滚动
    window.scrollTo({
      top: targetElement.offsetTop,
      behavior: 'smooth'
    });
  };

  return (
    <div className="App">
      <nav className="navbar">
        {/* 给每个导航链接绑定自定义滚动事件 */}
        <a href="#section1" onClick={(e) => scrollToTarget(e, 'section1')}>Section 1</a>
        <a href="#section2" onClick={(e) => scrollToTarget(e, 'section2')}>Section 2</a>
        <a href="#section3" onClick={(e) => scrollToTarget(e, 'section3')}>Section 3</a>
        <a href="#section4" onClick={(e) => scrollToTarget(e, 'section4')}>Section 4</a>
        <a href="#section5" onClick={(e) => scrollToTarget(e, 'section5')}>Section 5</a>
      </nav>

      {/* 你的sticky区块代码保持不变 */}
      <section id="section1" className="section">Section 1 Content</section>
      <section id="section2" className="section">Section 2 Content</section>
      <section id="section3" className="section">Section 3 Content</section>
      <section id="section4" className="section">Section 4 Content</section>
      <section id="section5" className="section">Section 5 Content</section>
    </div>
  );
}

export default App;

方法二：利用CSS scroll-margin-top（适用于简单场景） #

如果导航栏是固定高度，且区块遮挡仅来自导航栏，可以给每个sticky区块添加scroll-margin-top，为锚点跳转预留顶部空间：

.section {
  position: sticky;
  top: 0;
  scroll-margin-top: 60px; /* 数值等于导航栏的高度 */
}

注意：这个方法无法解决多个sticky区块堆叠遮挡的问题，仅能处理导航栏遮挡的情况，因此更推荐方法一。

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