如何固定导航栏和左侧边栏#

什么是固定布局#

固定布局是指在网页滚动时，部分页面元素保持固定位置不变，而其他元素可以正常滚动的布局方式。在博客中，通常需要固定的元素包括：

导航栏：固定在页面顶部
左侧边栏：固定在页面左侧
主内容区：可滚动显示文章内容

实现方法#

1. 固定导航栏#

在 src/layouts/MainGridLayout.astro 文件中：

1
<!-- Navbar -->
2
<div id="top-row" class="z-50 pointer-events-none fixed top-0 left-0 right-0 transition-all duration-700 max-w-[var(--page-width)] px-0 md:px-4 mx-auto" class:list={[""]}>
3
    <div id="navbar-wrapper" class="pointer-events-auto sticky top-0 transition-all">
4
        <Navbar></Navbar>
5
    </div>
6
</div>

关键 CSS 类：

fixed top-0 left-0 right-0：固定定位在页面顶部
z-50：设置较高的 z-index，确保导航栏显示在其他元素之上

2. 固定左侧边栏#

在 src/layouts/MainGridLayout.astro 文件中：

1
<div class="grid grid-cols-1 lg:grid-cols-[17.5rem_auto] gap-4 h-full">
2
    <!-- Left sidebar (fixed) -->
3
    <div class="lg:block hidden">
4
        <SideBar class="onload-animation" headings={headings}></SideBar>
5
    </div>
6

7
    <!-- Main content (scrollable) -->
8
    <div class="flex flex-col h-full">
9
        <!-- Mobile sidebar -->
10
        <div class="lg:hidden mb-4">
11
            <SideBar class="onload-animation" headings={headings}></SideBar>
12
        </div>
13

14
        <main id="swup-container" class="transition-swup-fade flex-1">
15
            <div id="content-wrapper" class="onload-animation h-full overflow-y-auto overflow-x-hidden">
16
                <!-- the overflow-hidden here prevent long text break the layout-->
17
                <!-- make id different from windows.swup global property -->
18
                <slot></slot>
19
                <div class="footer onload-animation">
20
                    <Footer></Footer>
21
                </div>
22
            </div>
23
        </main>
24
    </div>
25
</div>

关键实现：

使用 grid 布局创建两列结构
左侧边栏使用固定宽度 17.5rem
主内容区使用 flex-1 占据剩余空间
主内容区设置 overflow-y-auto 使其可滚动

布局优势#

导航便捷：用户可以随时访问导航链接，无需滚动到页面顶部
信息完整：个人信息始终可见，增强品牌认知
专注阅读：读者可以专注于文章内容，不受其他元素干扰
响应式设计：在移动设备上自动调整为单列布局

常见问题及解决方案#

1. 导航栏不固定#

可能原因：

缺少 fixed 定位
z-index 值过低

解决方案：

1
.navbar {
2
    position: fixed;
3
    top: 0;
4
    left: 0;
5
    right: 0;
6
    z-index: 1000;
7
}

2. 左侧边栏滚动#

可能原因：

未设置固定定位
父容器高度限制

解决方案：

1
.sidebar {
2
    position: sticky;
3
    top: 0;
4
    height: 100vh;
5
    overflow-y: auto;
6
}

3. 内容区域重叠#

可能原因：

元素定位冲突
缺少适当的间距

解决方案：

为固定元素添加适当的 padding 或 margin
确保主内容区有足够的 padding-left 以避免被侧边栏遮挡

示例代码#

完整的布局实现#

1
---
2
import MainGridLayout from "../layouts/MainGridLayout.astro";
3
---
4

5
<MainGridLayout>
6
    <div class="card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full">
7
        <!-- 文章内容 -->
8
    </div>
9
</MainGridLayout>

CSS 变量配置#

在 src/styles/global.css 文件中：

1
:root {
2
    --page-width: 80rem;
3
    --sidebar-width: 17.5rem;
4
    --content-width: calc(100% - var(--sidebar-width));
5
}
6

7
@media (min-width: 1024px) {
8
    .main-content {
9
        width: var(--content-width);
10
        margin-left: var(--sidebar-width);
11
    }
12
}

响应式设计考虑#

桌面端#

固定导航栏和左侧边栏
主内容区可滚动

平板端#

固定导航栏
左侧边栏可折叠
主内容区可滚动

移动端#

顶部导航栏固定
侧边栏转为底部导航菜单
单列布局显示内容

总结#

实现固定导航栏和左侧边栏的关键是：

正确的定位：使用 fixed 或 sticky 定位
适当的 z-index：确保元素显示顺序正确
合理的布局结构：使用 grid 或 flex 布局
响应式设计：适配不同屏幕尺寸
滚动管理：控制哪些元素可滚动，哪些元素固定

通过以上方法，您可以实现一个具有固定导航栏和左侧边栏的博客布局，提供更好的用户体验。

最佳实践#

使用语义化 HTML：提高可访问性和 SEO
合理使用 CSS 变量：方便主题定制和维护
优化图片和资源：提高页面加载速度
测试不同设备：确保响应式设计正常工作
监控性能：使用浏览器开发工具分析布局性能

作者：BAJJDY

2026年1月30日