导航栏Y轴固定X轴不固定及窗口缩小时隐藏的技术咨询

核心修复步骤 #

1. 替换position: fixed为position: sticky，解决X轴滚动重叠问题 #

fixed定位会让导航栏脱离文档流，完全相对于视口定位，导致X轴滚动时无法跟随页面移动。改用sticky后，导航栏既能保持Y轴滚动时固定在视口，又能留在文档流中，X轴滚动时会和主内容同步移动，避免重叠。

修改后的CSS片段：

.grid-container {
  display: grid;
  grid-template-columns: 180px 1fr; /* 给侧边栏固定宽度，主内容占剩余空间 */
  gap: 20px; /* 增加间距避免挤在一起 */
  padding: 0 20px; /* 页面左右加内边距，防止内容贴边 */
}

.item-sidebar {
  position: sticky; /* 替换fixed为sticky */
  top: 10%; /* Y轴固定位置不变 */
  align-self: start; /* 让侧边栏从顶部开始定位 */
  font-size: 90%;
}

.item-main {
  width: 100%; /* 去掉原margin-left和固定宽度，由grid布局控制间距 */
  max-width: 100%;
  font-size: 110%;
  hyphens: auto;
  text-align: justify;
}

2. 添加媒体查询，实现小窗口自动隐藏导航栏 #

当窗口宽度小于768px（可根据需求调整）时，隐藏侧边栏，让主内容占满整个宽度，保证移动端浏览体验。

添加到CSS末尾：

@media (max-width: 768px) {
  .item-sidebar {
    display: none; /* 隐藏导航栏 */
  }

  .grid-container {
    grid-template-columns: 1fr; /* 主内容占满整行 */
  }
}

3. 调整列表样式，避免溢出 #

原负margin设置会导致列表在小宽度下溢出，改为固定padding值：

ol {
  padding-left: 20px; /* 替换负margin，避免溢出 */
  counter-reset: item;
  list-style-type: none;
}

ol.first {
  padding-left: 30px; /* 二级列表增加缩进 */
}

修改后的完整代码 #

CSS部分 #

html {
  scroll-behavior: smooth;
}

.grid-container {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  padding: 0 20px;
}

.item-sidebar {
  position: sticky;
  top: 10%;
  align-self: start;
  font-size: 90%;
}

.item-main {
  width: 100%;
  max-width: 100%;
  font-size: 110%;
  hyphens: auto;
  text-align: justify;
}

body {
  background-color: #1f1f1f;
  color: white;
  font-weight: normal;
  font-family: monospace;
  margin: 0; /* 去掉默认body margin */
}

ol {
  padding-left: 20px;
  counter-reset: item;
  list-style-type: none;
}

ol.first {
  padding-left: 30px;
}

ol li::before {
  counter-increment: item;
  content: counters(item, ".") ". ";
}

/* 响应式隐藏规则 */
@media (max-width: 768px) {
  .item-sidebar {
    display: none;
  }

  .grid-container {
    grid-template-columns: 1fr;
  }
}

HTML部分（结构无需大幅修改） #

<body>
    <div class="grid-container">
        <div class="item-sidebar">
            <ol>
                <li><a href="index.html#intro">Introduction</a></li>
                <li><a href="index.html#prep">Preparations</a></li>
                    <ol class="first">
                        <li><a href="index.html#Fallout2_Installation">Installation - Fallout2</a></li>
                        <li><a href="index.html#Fallout2_.dat_files">File handling - .dat files</a></li>
                        <li><a href="index.html#Tools_Data_Exploring">Tools - .dat Extractor</a></li>
                        <li><a href="index.html#Extracting_.dat_files">Extracting - .dat files</a></li>
                        <li><a href="index.html#Tools_Scripting">Tools - Scripting</a></li>
                        <li><a href="index.html#Config_sFall_Script_Editor">Config - sFall Script Editor</a></li>
                        <li><a href="index.html#Tools_Mapping">Tools - Mapping</a></li>
                        <li><a href="index.html#Config_BIS_Mapper">Config - BIS Mapper</a></li>
                    </ol>
                <li><a href="index.html#mapping">Mapping</a></li>
                    <ol class="first">
                        <li><a href="index.html#BIS_Mapper_explained">BIS Mapper explained</a></li>
                            <ol>
                                <li><a href="index.html#hotkeys">Hotkeys</a></li>
                            </ol>
                        <li><a href="index.html#build_map">How to build a map</a></li>
                            <ol>
                                <li><a href="index.html#FloorWall">Floors and walls</a></li>
                                <li><a href="index.html#SceneryCritter">Scenery and critters</a></li>
                                <li><a href="index.html#LadderStair">Ladders and stairs</a></li>
                                <li><a href="index.html#ScrollBlocker">Scroll blocker</a></li>
                                <li><a href="index.html#MapExit">Map exits</a></li>
                                <li><a href="index.html#Worldmap">Worldmap</a></li>
                            </ol>
                        <li><a href="index.html#New_Critter">Make new prototype</a></li>
                    </ol>
                <!-- 剩余列表内容保持不变 -->
            </ol>
        </div>  

        <div class="item-main">
            <header>
                <h1>Fallout 2 Modding Guide</h1>
                <br>
                    <p>Written by Femic et al.</p>
                    <img src="images/Header/Please_stand_by_Fallout.jpg" alt="Please stand by">
                    <p><em>Shot a child in the face after he pickpocketed me. Turned the whole town hostile. Ran away to New Reno. Became a Pornstar.
                <br>
                    Fallout 2 in a nutshell.
                <br>        
                    11/10</em></p>--Rat Prik (Steam review)
            </header>
        <br>
        <hr>
        <hr>
        <!-- 剩余主内容保持不变 -->
        </div>
    </div>
</body>

效果说明 #

• Y轴滚动时，导航栏固定在视口顶部10%位置，不会随内容滚动消失
• X轴滚动时，导航栏与主内容同步横向移动，无重叠问题
• 窗口宽度小于768px时，导航栏自动隐藏，主内容占满屏幕宽度

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