跳转至其他HTML页面后如何保持Navbar/Sidebar始终固定？

刚学完前端基础知识，正在实操练习。遇到的问题是：用href跳转到其他HTML页面后，侧边导航栏（Navbar/Sidebar）没办法一直保持固定状态。找了很多视频和资料，都只讲怎么制作导航栏，没说页面切换后怎么维持固定效果，求解决方法。

相关代码 #

CSS代码 #

body {
    margin: 0;
}

* {
    font-family: "Google Sans Regular";
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

.navbar {
    height: 100vh;
    width: 100px;
    background: #191735;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    position: fixed;
    z-index: 1;
}

HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./Kalkulator/css/style.css">
    <title>TÜV i-sec</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <nav class="navbar">
      <a href="./Kalkulator/html/komponente.html#divof">Managed Security Service</a>
      <a href="">EPP Managed Service</a>
    </nav>
  </body>
  <script src="./Kalkulator/js/startInterface.js"></script>
</html>

问题核心是：每个HTML页面都是独立的，跳转后新页面不会自动继承原页面的DOM结构和样式，所以必须确保每个目标页面都有导航栏的HTML结构，并且正确加载了包含固定样式的CSS文件，下面是几种可行的实现方式：

1. 手动在每个页面复制导航栏代码 #

直接把<nav class="navbar">...</nav>这段代码，粘贴到所有需要显示固定导航栏的HTML页面的<body>标签内，同时确保每个页面的<head>里都正确引入了你的style.css文件（注意路径要对应，比如目标页面komponente.html的CSS路径可能需要调整为../css/style.css）。

这种方法简单直接，适合页面数量少的场景。

2. 用服务器端包含复用导航栏 #

如果你的项目部署在支持服务器端脚本的环境（比如PHP），可以把导航栏抽成单独的文件，比如navbar.html：

<!-- navbar.html -->
<nav class="navbar">
  <a href="./Kalkulator/html/komponente.html#divof">Managed Security Service</a>
  <a href="">EPP Managed Service</a>
</nav>

然后在每个需要导航栏的页面里用服务器端语法引入：

<?php include 'navbar.html'; ?>

这样只需要维护一个导航栏文件，修改时不用逐个页面更新。

3. 用JavaScript动态加载导航栏 #

写一个专门的JS文件来生成导航栏，比如navbar.js：

// navbar.js
// 创建导航栏元素
const navbar = document.createElement('nav');
navbar.className = 'navbar';
// 设置导航栏内容
navbar.innerHTML = `
  <a href="./Kalkulator/html/komponente.html#divof">Managed Security Service</a>
  <a href="">EPP Managed Service</a>
`;
// 把导航栏添加到页面最前面
document.body.prepend(navbar);

然后在所有页面的<body>末尾引入这个JS文件，同时确保每个页面都加载了style.css。

额外检查点 #

• 确认目标页面的CSS路径正确，浏览器控制台的“网络”标签可以查看CSS是否加载成功；
• 检查是否有其他样式（比如Bootstrap的默认样式）覆盖了.navbar的position: fixed，可以通过浏览器开发者工具查看元素的计算样式，确认position属性值是否为fixed。

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