响应式水平滚动页面：固定标题无法推挤下方内容的问题求助

我正在搭建个人作品集网站，具备基础HTML和CSS知识，首次尝试制作响应式水平滚动页面时碰到问题：想让标题固定在屏幕上，内容可水平滚动。给标题设置fixed定位后，响应式场景下标题会换行，但fixed定位的标题无法推挤下方内容，导致两者重叠。想问怎么让固定定位的元素推挤下方内容？是不是不该用fixed定位，或者有其他滚动实现方式？

单行长标题正常显示截图 #

标题固定导致内容重叠问题截图 #

当前使用的CSS代码 #

.sub-page {
  padding-left: 40px;
  padding-top: 40px;
  flex-direction: column;
}

.sub-page h2 {
  margin-bottom: 16px;
  position: fixed;
}

.scrolling-wrapper {
  display: flex;
  width: 100%;
  height: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  
}

HTML结构 #

<div class="container">

    <div class="page sub-page">
        <h2>Selected works</h2>

        <div class="scrolling-wrapper">

            <div class="list">

                <a class="list-item"><h3>Card</h3></a>
                <a class="list-item"><h3>Card</h3></a>
                <a class="list-item"><h3>Card</h3></a>
                <a class="list-item"><h3>Card</h3></a>
                <a class="list-item"><h3>Card</h3></a>
                <a class="list-item"><h3>Card</h3></a>
                <a class="list-item"><h3>Card</h3></a>
                <a class="list-item"><h3>Card</h3></a>
                <a class="list-item"><h3>Card</h3></a>
                <a class="list-item"><h3>Card</h3></a>
                <a class="list-item"><h3>Card</h3></a>

            </div>
        </div>
    </div>

水平滚动实现逻辑 #

当前水平滚动通过监听鼠标/触摸事件实现拖拽滚动，核心是计算位移来控制内容滚动位置。我怀疑当前滚动是针对整个页面的，而非仅内容区域。

解决方案 #

1. 改用sticky定位（推荐）

fixed定位元素会脱离文档流，无法给下方内容预留空间，position: sticky可以让标题滚动时固定在视口，同时保留文档流占位，避免重叠：

.sub-page h2 {
  margin-bottom: 16px;
  position: sticky;
  top: 40px; /* 和sub-page的padding-top对应，保证标题位置正确 */
  background: #fff; /* 添加背景色，防止滚动时内容透过标题显示 */
  z-index: 10;
}

2. 给内容区域适配fixed标题空间（兼容方案）

如果坚持用fixed定位，需要给内容区域添加等于标题高度的内边距，响应式下需用JS动态计算：

// 页面加载和窗口 resize 时更新内容区域padding
function adjustContentPadding() {
  const title = document.querySelector('.sub-page h2');
  const wrapper = document.querySelector('.scrolling-wrapper');
  wrapper.style.paddingTop = `${title.offsetHeight + 16}px`; // 16px为原标题的margin-bottom
}

window.addEventListener('load', adjustContentPadding);
window.addEventListener('resize', adjustContentPadding);

同时调整标题CSS，确保位置正确：

.sub-page h2 {
  margin-bottom: 16px;
  position: fixed;
  top: 40px;
  left: 40px;
  background: #fff;
  z-index: 10;
  width: calc(100% - 40px); /* 限制标题宽度，避免超出视口 */
}

3. 限制水平滚动仅作用于内容区域

给.scrolling-wrapper添加overflow-x: auto，无需额外JS即可实现基础水平滚动：

.scrolling-wrapper {
  display: flex;
  width: 100%;
  height: auto;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

如果需要拖拽交互，修改JS逻辑，让滚动事件仅作用于.scrolling-wrapper元素。

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