固定导航栏（fixed navbar）滚动与链接功能冲突问题求助

问题根源分析 #

你的代码存在几个关键问题，直接导致导航栏功能冲突：

• 无效CSS选择器： { position: fixed; } 是语法错误，会干扰浏览器对正常样式的解析，需直接删除
• Bootstrap样式与自定义CSS冲突：你使用了Bootstrap的fixed-top类（已实现固定定位），却重复给.navbar设置position: fixed；同时自定义的float: left会破坏Bootstrap navbar的flex布局，导致链接点击区域异常
• 重复样式定义：两个.navbar规则互相覆盖，造成定位和布局属性混乱
• HTML语法错误：部分<li>标签存在多余闭合（比如第一个<li>多了一个</li>）

修正后的代码 #

HTML部分（修复标签错误）

<body>
  <nav class="navbar navbar-expand-lg fixed-top navbarScroll">
    <div class="container">
      <!-- <a class="navbar-brand" href="#">insertgenericnamehere</a> -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#About">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#services">UX/UI</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#Portfolio">Portfolio</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

CSS部分（精简并兼容Bootstrap）

/* 保留自定义样式，移除冲突和无效代码 */
.navbar {
  margin: 0;
  padding: 0;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

/* 针对Bootstrap的.nav-link自定义样式，不破坏原有布局 */
.nav-link {
  color: #666;
  padding: 14px 16px;
  text-decoration: none;
}

.nav-link:hover:not(.active) {
  background-color: #ddd;
}

.nav-link.active {
  color: white;
  background-color: #04AA6D;
}

/* 给页面主体添加顶部内边距，避免内容被固定导航栏遮挡 */
body {
  padding-top: 56px; /* 数值可根据导航栏实际高度调整 */
}

关键说明 #

1. 依赖Bootstrap的fixed-top类实现导航栏固定，无需重复设置position: fixed
2. 删除float: left，Bootstrap的navbar-nav已通过flex实现横向布局
3. 添加body { padding-top: ... }，防止页面顶部内容被固定导航栏遮挡
4. 修正HTML中多余的闭合标签，保证DOM结构正常

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